:root{
  --bg:#0A0D13;
  --bg-elevated:#10141C;
  --surface:rgba(255,255,255,0.035);
  --surface-solid:#141922;
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.18);
  --gold:#CFA968;
  --gold-soft:rgba(207,169,104,0.14);
  --cyan:#5FD8CF;
  --cyan-soft:rgba(95,216,207,0.13);
  --text:#EEF1F6;
  --text-dim:#8D97AA;
  --text-faint:#5B6478;
  --danger:#E2685F;
  --radius:14px;
  --mono:'JetBrains Mono', monospace;
  --ease:cubic-bezier(.16,.8,.24,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{margin:0;padding:0;}
::selection{ background:var(--gold); color:#12100A; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  display:flex;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }


.bg-grain{ display:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}


#scrollProgress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  z-index:1150; transition:width 0.1s linear;
}
#backToTop{
  position:fixed; bottom:26px; right:26px; width:44px; height:44px; border-radius:50%;
  background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1090;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.2s ease;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ border-color:var(--gold); color:var(--gold); }


.reveal{ opacity:1; }


.menu-toggle{
  position:fixed;
  top:22px;
  left:22px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--surface-solid);
  border:1px solid var(--border-strong);
  cursor:pointer;
  z-index:1100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:0 4px 18px rgba(0,0,0,0.4);
  transition:left 0.3s ease, border-color 0.2s ease;
}
.menu-toggle:hover{ border-color:var(--gold); box-shadow:0 4px 18px rgba(0,0,0,0.4), 0 0 16px rgba(207,169,104,0.25); transform:translateY(-1px); }
.menu-toggle span{
  width:20px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform 0.25s ease, opacity 0.2s ease;
}
body.sidebar-open .menu-toggle{ left:300px; }
body.sidebar-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.sidebar-open .menu-toggle span:nth-child(2){opacity:0;}
body.sidebar-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.gallery-btn{
  position:fixed;
  top:22px;
  right:22px;
  z-index:1100;
  background:var(--surface-solid);
  color:var(--text);
  font-size:0.82rem;
  font-weight:600;
  padding:12px 20px;
  border-radius:30px;
  box-shadow:0 4px 18px rgba(0,0,0,0.4);
  border:1px solid var(--gold);
  transition:background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space:nowrap;
}
.gallery-btn:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 6px 22px rgba(207,169,104,0.25); }
@media (max-width:780px){
  .gallery-btn{ top:16px; right:16px; padding:9px 14px; font-size:0.72rem; }
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease;
  z-index:1000;
}
body.sidebar-open .overlay{ opacity:1; visibility:visible; }


.sidebar{
  width:280px;
  flex-shrink:0;
  background:var(--bg-elevated);
  border-right:1px solid var(--border);
  color:var(--text);
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  gap:28px;
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform 0.3s ease;
  z-index:1050;
}
body.sidebar-open .sidebar{ transform:translateX(0); }
.brand{ display:flex; align-items:center; gap:14px; }
.avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--cyan));
  box-shadow:0 0 0 3px var(--bg-elevated), 0 0 18px rgba(207,169,104,0.35);
  flex-shrink:0;
  object-fit:cover;
  display:block;
  transition:box-shadow 0.3s ease, transform 0.3s ease;
}
.brand:hover .avatar{ box-shadow:0 0 0 3px var(--bg-elevated), 0 0 26px rgba(207,169,104,0.5); transform:scale(1.04); }
.brand-name{ font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600; line-height:1.2; color:var(--text); }
.brand-role{ font-family:var(--mono); font-size:0.72rem; color:var(--text-dim); margin-top:4px; letter-spacing:0.03em; }
nav{ display:flex; flex-direction:column; gap:2px; margin-top:8px; position:relative; }
.nav-indicator{
  position:absolute; left:0; width:100%; height:38px; border-radius:8px;
  background:var(--gold-soft); border-left:2px solid var(--gold);
  transition:transform 0.3s var(--ease), opacity 0.2s ease;
  pointer-events:none; z-index:0; opacity:0;
}
.nav-indicator.ready{ opacity:1; }
nav a{
  padding:10px 12px; border-radius:8px; font-size:0.92rem; color:var(--text-dim);
  border-left:2px solid transparent; position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  transition:background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
nav a i{ width:16px; text-align:center; font-size:0.86rem; color:var(--text-faint); transition:color 0.2s var(--ease); }
nav a:hover i, nav a.active i{ color:var(--gold); }
nav a:hover{ transform:translateX(3px); }
nav a:hover, nav a.active{
  background:var(--gold-soft);
  border-left-color:var(--gold);
  color:var(--text);
}
nav a.active{ background:transparent; }
.sidebar-footer{ margin-top:auto; display:flex; gap:14px; flex-wrap:wrap; }
.sidebar-footer a{
  width:34px;height:34px; border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;
  color:var(--text-dim);
  transition:border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sidebar-footer a:hover{ background:var(--cyan-soft); border-color:var(--cyan); color:var(--text); transform:translateY(-3px); box-shadow:0 6px 16px rgba(95,216,207,0.2); }
.sidebar-footer a i{ font-size:0.95rem; }


main{
  flex:1;
  width:100%;
  padding:64px 72px 72px 112px;
  max-width:1040px;
  margin:0 auto;
}
.hero-photo{
  flex-shrink:0;
  width:180px;
  height:180px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--border-strong);
  box-shadow:0 0 0 1px var(--gold-soft), 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(207,169,104,0.15);
  background:var(--surface-solid);
  transition:box-shadow 0.3s ease;
}
.hero-parallax{
  transform:translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  transition:transform 0.2s ease-out;
}
.hero-photo:hover{ box-shadow:0 0 0 1px var(--gold-soft), 0 16px 46px rgba(0,0,0,0.55), 0 0 42px rgba(207,169,104,0.28); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){
  .hero{ flex-direction:column-reverse; align-items:center; text-align:center; }
  .hero-photo{ width:140px; height:140px; }
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cyan); font-weight:500; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:''; display:inline-block; width:22px; height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
}
.hero{
  position:relative;
  border-bottom:1px solid var(--border);
  padding:34px 0 56px;
  margin-bottom:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  isolation:isolate;
  min-height:360px;
}
.hero::before{
  content:'';
  position:absolute;
  inset:-16px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(207,169,104,0.08), rgba(95,216,207,0.06));
  border:1px solid rgba(255,255,255,0.06);
  z-index:-1;
  pointer-events:none;
}
.hero-text{ flex:1; min-width:0; max-width:660px; }
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 18px;
  align-items:center;
  width:100%;
  max-width:760px;
  row-gap:8px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.09);
  color:var(--text-dim);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.018em;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,0.14);
  flex:0 0 auto;
  min-width:fit-content;
}
.hero-badge i{ color:var(--gold); font-size:0.8rem; }
.hero-typing{
  margin:0 0 16px;
  font-size:1rem;
  color:var(--text-dim);
  line-height:1.7;
  min-height:1.7em;
}
.typing-prefix{ color:var(--text); }
.typing-cursor{
  display:inline-block;
  margin-left:2px;
  color:var(--gold);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(2.35rem, 3.8vw, 3.35rem);
  line-height:0.98;
  letter-spacing:-0.025em;
  margin:0 0 18px;
  color:var(--text);
  background:linear-gradient(135deg,var(--text) 35%,var(--gold) 130%);
  -webkit-background-clip:text;
  background-clip:text;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lede{ font-size:1.05rem; color:var(--text-dim); line-height:1.8; max-width:560px; }
.contact-line{ margin-top:22px; font-size:0.92rem; color:var(--text-dim); }
.contact-line a{ color:var(--gold); font-weight:500; border-bottom:1px solid transparent; transition:border-color 0.2s ease; }
.contact-line a:hover{ border-color:var(--gold); }


.hero-actions{ display:flex; align-items:center; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:50px;
  font-size:0.9rem; font-weight:600; cursor:pointer; position:relative; overflow:hidden;
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-primary:hover, .btn-secondary:hover, .sec-btn:hover, .cv-download-btn:hover, .back-link:hover, .gallery-btn:hover, .menu-toggle:hover, .sidebar-footer a:hover, .hero-social a:hover, nav a:hover{
  transform:translateY(-3px) scale(1.01);
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#B98F4C 70%,var(--gold)); background-size:200% 100%;
  color:#12100A; border:none;
}
.btn-primary:hover{ background-position:100% 0; transform:translateY(-2px); box-shadow:0 10px 28px rgba(207,169,104,0.32); }
.btn-secondary{ background:var(--surface); color:var(--text); border:1px solid var(--border-strong); }
.btn-secondary:hover{ border-color:var(--cyan); background:var(--cyan-soft); transform:translateY(-2px); box-shadow:0 10px 24px rgba(95,216,207,0.18); }
.btn-primary:active, .btn-secondary:active{ transform:translateY(0); }
.hero-social{ display:flex; align-items:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.hero-social a{
  width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:0.86rem;
  transition:border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hero-social a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 20px rgba(207,169,104,0.18); }
@media (max-width:640px){ .hero-actions, .hero-social{ justify-content:center; } }

section{ margin-bottom:64px; }
section h2{ font-family:'Fraunces',serif; font-size:1.45rem; font-weight:600; margin-bottom:16px; color:var(--text); position:relative; padding-left:16px; }
section h2::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--cyan));
}
section p{ color:var(--text-dim); line-height:1.85; max-width:640px; }

.about-story a{
  color:var(--cyan); font-weight:600; border-bottom:1px solid var(--gold);
  padding-bottom:1px; transition:color 0.15s ease;
}
.about-story a:hover{ color:var(--gold); }

footer{
  border-top:1px solid var(--border); padding-top:40px; margin-top:8px;
  display:flex; flex-direction:column; gap:28px;
}
.footer-top{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.footer-brand{ max-width:320px; }
.footer-brand .brand-name{ font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; color:var(--text); margin-bottom:8px; }
.footer-brand p{ font-size:0.86rem; color:var(--text-dim); line-height:1.7; margin:0; }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 22px; max-width:420px; }
.footer-links a{
  font-size:0.84rem; color:var(--text-dim); transition:color 0.2s var(--ease);
}
.footer-links a:hover{ color:var(--gold); }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:0.82rem;
  transition:border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.footer-social a:hover{ border-color:var(--cyan); color:var(--text); transform:translateY(-3px); box-shadow:0 6px 16px rgba(95,216,207,0.2); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-top:22px; border-top:1px solid var(--border);
  font-size:0.8rem; color:var(--text-faint);
}
.footer-bottom .to-top{ color:var(--text-dim); cursor:pointer; transition:color 0.2s var(--ease); }
.footer-bottom .to-top:hover{ color:var(--gold); }


.view{ display:none; }
.view.active{ display:block; }
.view-embed{ flex-direction:column; height:100vh; }
.view-embed.active{ display:flex; }
.embed-header{
  display:flex; align-items:center; gap:16px;
  padding:6px 0 20px; margin-bottom:8px; border-bottom:1px solid var(--border);
}
.embed-header h2{ margin:0; font-family:'Fraunces',serif; font-size:1.35rem; font-weight:600; color:var(--text); }
.back-link{
  font-size:0.85rem; font-weight:600; color:var(--cyan); cursor:pointer;
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:50px;
  background:var(--surface); border:1px solid var(--border);
  transition:border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.back-link:hover{ text-decoration:none; border-color:var(--cyan); background:var(--cyan-soft); transform:translateX(-2px); }
.embed-frame-wrap{
  flex:1; margin-top:18px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--surface-solid);
}
.embed-frame-wrap iframe{ width:100%; height:100%; border:0; display:block; }


.sec-wrap{
  max-width:380px;
  margin:24px auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 40%), var(--surface-solid);
  border:1px solid var(--border);
  border-radius:20px;
  padding:34px 30px 30px;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.sec-wrap::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  opacity:0.85;
}
.sec-wrap:hover{ border-color:var(--border-strong); box-shadow:0 24px 60px rgba(0,0,0,0.5); }
.sec-icon{ font-size:2.4rem; margin-bottom:8px; color:var(--gold); }
.sec-title{
  font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em; margin:0 0 22px; color:var(--text);
}
.sec-input-wrap{ position:relative; margin-bottom:18px; }
.sec-input-wrap input{
  width:100%; padding:14px 44px 14px 16px; border:1px solid var(--border);
  border-radius:50px; outline:none; text-align:center; font-size:0.96rem;
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; box-sizing:border-box;
}
.sec-input-wrap input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.sec-toggle-eye{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  cursor:pointer; color:var(--text-dim);
}

.sec-btn{
  display:flex; align-items:center; width:100%; padding:14px 18px; margin:10px 0;
  border-radius:12px; font-weight:600; text-decoration:none; transition:0.2s var(--ease);
  cursor:pointer; border:none; font-size:0.95rem; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-left:4px solid var(--cyan);
  text-align:left; position:relative; overflow:hidden;
}
.sec-btn i{ margin-right:14px; width:18px; text-align:center; }
.sec-btn:hover{ background:var(--cyan-soft); border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.3); }
.sec-btn:active{ transform:translateY(0); }

.sec-submit-btn{
  display:flex; background:linear-gradient(135deg,var(--gold),#B98F4C); color:#12100A;
  border-radius:50px; justify-content:center; border-left:none; border:none;
  font-weight:700;
}
.sec-submit-btn:hover{ opacity:0.92; background:linear-gradient(135deg,var(--gold),#B98F4C); box-shadow:0 8px 24px rgba(207,169,104,0.3); }

.sec-screen{ display:none; }
.sec-screen.active{ display:block; animation:authFade 0.3s ease-in-out; }
@keyframes authFade{ from{opacity:0;} to{opacity:1;} }
.sec-error{ color:var(--danger); font-size:0.8rem; margin-top:8px; min-height:1.1em; }


.sec-menu-header{ position:relative; }
.sec-settings-btn{
  position:absolute; top:-6px; right:-6px; width:34px; height:34px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:0.2s var(--ease); font-size:0.9rem;
}
.sec-settings-btn:hover{ color:var(--gold); border-color:var(--gold); background:var(--gold-soft); transform:rotate(45deg); }

.sec-swipe-row{
  position:relative; overflow:hidden; margin:10px 0; border-radius:12px;
  touch-action:pan-y; user-select:none;
}
.sec-swipe-action{
  position:absolute; top:0; bottom:0; width:72px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; cursor:pointer; z-index:0;
  transition:opacity 0.2s var(--ease);
}
.sec-swipe-action-left{
  left:0; background:rgba(76,175,80,0.18); color:#4CAF50;
}
.sec-swipe-action-left:hover{ background:rgba(76,175,80,0.28); }
.sec-swipe-action-right{
  right:0; background:rgba(226,104,95,0.18); color:var(--danger);
}
.sec-swipe-action-right:hover{ background:rgba(226,104,95,0.28); }
.sec-swipe-content{
  position:relative; z-index:1; width:100%;
  background:var(--surface-solid);
  border-radius:12px;
  overflow:hidden;
  transition:transform 0.25s var(--ease);
  will-change:transform;
}
.sec-swipe-content .sec-btn{
  margin:0; width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--cyan);
  border-radius:12px;
}
.sec-swipe-content .sec-btn:hover{
  transform:none;
  background:var(--cyan-soft);
  border-color:var(--cyan);
  box-shadow:0 8px 22px rgba(0,0,0,0.3);
}
.sec-swipe-row.is-dragging .sec-swipe-content .sec-btn{ pointer-events:none; }
.sec-swipe-row.is-open-left .sec-swipe-content{ transform:translateX(72px); }
.sec-swipe-row.is-open-right .sec-swipe-content{ transform:translateX(-72px); }

.sec-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease;
}
.sec-modal-overlay.active{ opacity:1; visibility:visible; }
.sec-modal{
  width:100%; max-width:360px; background:var(--surface-solid); border:1px solid var(--border-strong);
  border-radius:18px; padding:28px 26px; box-shadow:0 24px 60px rgba(0,0,0,0.5);
  transform:translateY(12px); transition:transform 0.25s ease;
}
.sec-modal-overlay.active .sec-modal{ transform:translateY(0); }
.sec-modal h3{
  font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; margin:0 0 18px; color:var(--text);
  text-align:center; text-transform:uppercase; letter-spacing:0.03em;
}
.sec-modal label{ display:block; font-size:0.78rem; color:var(--text-dim); margin:0 0 6px; font-family:var(--mono); }
.sec-modal input{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; outline:none;
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:0.92rem;
  box-sizing:border-box; margin-bottom:16px;
}
.sec-modal input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.sec-modal-actions{ display:flex; gap:10px; margin-top:4px; }
.sec-modal-actions button{
  flex:1; padding:12px; border-radius:50px; font-weight:700; cursor:pointer; font-size:0.88rem;
  border:1px solid var(--border); background:var(--surface); color:var(--text); transition:0.2s var(--ease);
}
.sec-modal-cancel:hover{ border-color:var(--border-strong); }
.sec-modal-save{
  background:linear-gradient(135deg,var(--gold),#B98F4C); color:#12100A; border:none;
}
.sec-modal-save:hover{ opacity:0.92; }
.sec-modal-save:disabled{ opacity:0.55; cursor:default; }
.sec-modal .sec-error{ text-align:center; margin-bottom:4px; }



.cv-wrap{
  max-width:380px;
  margin:24px auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 40%), var(--surface-solid);
  border:1px solid var(--border);
  border-radius:20px;
  padding:34px 30px 30px;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.cv-wrap::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  opacity:0.85;
}
.cv-wrap:hover{ border-color:var(--border-strong); box-shadow:0 24px 60px rgba(0,0,0,0.5); }
.cv-icon{ font-size:2.4rem; margin-bottom:8px; color:var(--cyan); }
.cv-title{
  font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em; margin:0 0 22px; color:var(--text);
}
.cv-input-wrap{ position:relative; margin-bottom:18px; }
.cv-input-wrap input{
  width:100%; padding:14px 44px 14px 16px; border:1px solid var(--border);
  border-radius:50px; outline:none; text-align:center; font-size:0.96rem;
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; box-sizing:border-box;
}
.cv-input-wrap input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.cv-toggle-eye{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  cursor:pointer; color:var(--text-dim);
}
.cv-download-btn{
  display:none; width:100%; padding:14px; margin-top:6px;
  background:linear-gradient(135deg,var(--gold),#B98F4C); color:#12100A; border:none;
  border-radius:50px; cursor:pointer; font-size:0.95rem; font-weight:700;
  text-decoration:none; transition:0.2s;
}
.cv-download-btn.show{ display:block; }
.cv-download-btn:hover{ opacity:0.92; box-shadow:0 8px 24px rgba(207,169,104,0.3); transform:translateY(-1px); }
.cv-error{ color:var(--danger); font-size:0.8rem; margin-top:8px; min-height:1.1em; text-align:center; }
.hide-el{ display:none !important; }


.sec-submit-btn, .cv-download-btn, .gallery-btn{
  color:var(--text) !important;
  border:2px solid var(--border-strong) !important;
  background-image:linear-gradient(145deg,#0B0D12,#151A22) !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
}
.sec-submit-btn:hover, .cv-download-btn:hover, .gallery-btn:hover{
  border-color:var(--gold) !important;
  background-image:linear-gradient(145deg,#11141B,#1B212B) !important;
  box-shadow:0 10px 26px rgba(0,0,0,0.5);
}
.sec-submit-btn:active, .cv-download-btn:active, .gallery-btn:active{
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
}


.sec-submit-btn i, .cv-download-btn i{
  text-shadow:0 0 8px currentColor;
}


.nav-doc-link{ margin-bottom:0; border-radius:8px !important; }


.back-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text-dim); cursor:pointer;
  transition:color 0.2s var(--ease);
}
.back-link:hover{ color:var(--gold); }



/* ---------- Realistic credit card UI ---------- */
#cardList{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:8px;
}
.plastic-card{
  position:relative;
  width:100%;
  aspect-ratio:1.586 / 1;
  max-width:360px;
  margin:0 auto;
  border-radius:16px;
  padding:18px 20px 16px;
  color:#fff;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
  cursor:pointer;
  user-select:none;
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.plastic-card:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 20px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.plastic-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0,0,0,0.25), transparent 50%);
  pointer-events:none;
}
.plastic-card::after{
  content:'';
  position:absolute;
  top:-40%;
  left:-20%;
  width:70%;
  height:180%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.08) 48%, transparent 56%);
  transform:rotate(12deg);
  pointer-events:none;
}
.plastic-card.brand-visa{
  background:linear-gradient(135deg, #1a1f71 0%, #2a3a8f 40%, #0d1b4c 100%);
}
.plastic-card.brand-mastercard{
  background:linear-gradient(135deg, #1a1a1a 0%, #3d3d3d 45%, #111 100%);
}
.plastic-card.brand-amex{
  background:linear-gradient(135deg, #016fd0 0%, #1b8ae0 45%, #004a94 100%);
}
.plastic-card.brand-discover{
  background:linear-gradient(135deg, #ff6600 0%, #e85d04 50%, #c44d00 100%);
}
.plastic-card.brand-default{
  background:linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}
.pc-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  position:relative;
  z-index:1;
}

.pc-company-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.pc-company-name{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:none;
  max-width:160px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  opacity:1;
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
  line-height:1.25;
}
.pc-logo{
  width:48px;
  height:48px;
  border-radius:10px;
  object-fit:contain;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.pc-logo-fallback{
  width:48px;
  height:48px;
  border-radius:10px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:rgba(255,255,255,0.7);
}
.pc-brand{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:0.95;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.pc-number-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 4px;
  flex-wrap:nowrap;
  width:100%;
}
.pc-number-row .pc-number{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
}
.pc-num-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.pc-num-btn{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(0,0,0,0.28);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:0.72rem;
  backdrop-filter:blur(6px);
  transition:background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.pc-num-btn:hover{
  background:rgba(0,0,0,0.48);
  border-color:rgba(255,255,255,0.45);
  transform:scale(1.08);
}
.pc-num-btn.is-on{
  background:rgba(207,169,104,0.35);
  border-color:rgba(207,169,104,0.7);
}
.pc-number{
  position:relative;
  z-index:1;
  font-family:var(--mono);
  font-size:clamp(0.78rem, 3.2vw, 1.05rem);
  letter-spacing:0.12em;
  font-weight:500;
  margin:8px 0 4px;
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pc-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  position:relative;
  z-index:1;
  gap:12px;
}
.pc-label{
  font-size:0.58rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.65;
  margin-bottom:2px;
}
.pc-name{
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  max-width:160px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pc-cvv-wrap{
  text-align:right;
}
.pc-cvv{
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.12em;
}
.pc-exp{
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.06em;
}
.pc-actions{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:6px;
  z-index:2;
  opacity:0;
  transition:opacity 0.2s ease;
}
.plastic-card:hover .pc-actions,
.plastic-card:focus-within .pc-actions{
  opacity:1;
}
.pc-action-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:0.75rem;
  backdrop-filter:blur(6px);
  transition:background 0.15s ease, transform 0.15s ease;
}
.pc-action-btn:hover{
  background:rgba(0,0,0,0.55);
  transform:scale(1.08);
}
.pc-action-btn.danger:hover{
  background:rgba(226,104,95,0.85);
}
.pc-copied{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.08em;
  z-index:5;
  border-radius:16px;
  animation:pcFade 1.2s ease forwards;
}
@keyframes pcFade{
  0%{ opacity:0; }
  15%{ opacity:1; }
  70%{ opacity:1; }
  100%{ opacity:0; }
}
#view-card .sec-wrap{
  max-width:400px;
}


/* Swipe-to-delete wrapper for plastic cards */
.pc-swipe-wrap{
  position:relative;
  max-width:360px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  touch-action:pan-y;
}
.pc-swipe-delete,
.pc-swipe-edit{
  position:absolute;
  top:0; bottom:0;
  width:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.15rem;
  z-index:0;
  cursor:pointer;
  border:none;
}
.pc-swipe-delete{
  right:0;
  background:linear-gradient(135deg, #c0392b, #e74c3c);
}
.pc-swipe-edit{
  left:0;
  background:linear-gradient(135deg, #1f8a5a, #27ae60);
}
.pc-swipe-delete:hover,
.pc-swipe-edit:hover{ filter:brightness(1.08); }
.pc-swipe-wrap .plastic-card{
  position:relative;
  z-index:1;
  margin:0;
  max-width:none;
  transition:transform 0.25s var(--ease);
  will-change:transform;
}
.pc-swipe-wrap.is-open-right .plastic-card{
  transform:translateX(-78px);
}
.pc-swipe-wrap.is-open-left .plastic-card{
  transform:translateX(78px);
}
.pc-swipe-wrap.is-dragging .plastic-card{
  transition:none;
}
/* hide old top-right action cluster trash; copy can stay subtle on hover */
.pc-actions{ display:none; }

@media (max-width:980px){
  main{ padding:88px 32px 48px 96px; }
  .hero{ gap:24px; min-height:auto; }
  .hero-badges{ gap:7px; max-width:100%; }
  .hero-badge{ font-size:12px; padding:6px 8px; }
  h1{ white-space:normal; font-size:clamp(2.05rem, 4.2vw, 2.7rem); line-height:1.03; }
}
@media (max-width:780px){
  .sidebar{ width:84%; max-width:300px; }
  main{ padding:88px 22px 48px; }
  .hero{ flex-direction:column-reverse; align-items:center; text-align:center; padding:24px 0 44px; }
  .hero-text{ max-width:100%; }
  .hero-actions, .hero-social, .hero-badges{ justify-content:center; }
  .hero-photo{ width:150px; height:150px; }
  h1{ font-size:clamp(1.95rem, 7vw, 2.45rem); white-space:normal; }
  .sec-wrap, .cv-wrap{ padding:26px 22px; max-width:100%; }
  .footer-top{ flex-direction:column; gap:24px; }
  .footer-links{ max-width:100%; }
}
@media (max-width:520px){
  main{ padding:84px 16px 48px; }
  .hero{ padding:16px 0 36px; }
  .hero-photo{ width:132px; height:132px; }
  h1{ font-size:clamp(1.7rem, 8.2vw, 2.1rem); line-height:1.08; letter-spacing:-0.02em; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn-primary, .btn-secondary{ width:100%; justify-content:center; }
  .hero-social{ gap:8px; }
  .hero-social a{ width:34px; height:34px; }
  .gallery-btn{ top:14px; right:14px; padding:8px 12px; font-size:0.7rem; }
  .menu-toggle{ top:14px; left:14px; width:42px; height:42px; }
  .hero-badges{ justify-content:center; }
  .hero-badge{ justify-content:center; }
}



/* My File manager */
#view-myfile .sec-wrap.mf-wide{ max-width:760px; }
.mf{ text-align:left; }
.mf-bar{ display:flex; gap:8px; margin-bottom:14px; }
.mf input[type=text]{
  flex:1; min-width:0; width:100%; background:var(--bg-elevated); border:1px solid var(--border-strong);
  color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; font-size:0.9rem;
}
.mf input[type=text]:focus{ outline:none; border-color:var(--gold); }
.mf-btn{
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  border-radius:10px; padding:10px 14px; cursor:pointer; font:inherit; font-size:0.85rem; white-space:nowrap;
}
.mf-btn:hover{ border-color:var(--gold); color:var(--gold); }
.mf-primary{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
.mf-folders{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; }
.mf-chip{
  flex:none; background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
  border-radius:999px; padding:6px 14px; cursor:pointer; font:inherit; font-size:0.8rem;
}
.mf-chip.active{ border-color:var(--cyan); color:var(--cyan); background:var(--cyan-soft); }
.mf-form{ display:none; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:14px; }
.mf-form.show{ display:flex; }
.mf-form-actions{ display:flex; gap:8px; justify-content:flex-end; }
.mf-list{ display:flex; flex-direction:column; gap:8px; }
.mf-item{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px 10px; }
.mf-item:hover{ border-color:var(--border-strong); }
.mf-open{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }
.mf-ico{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--gold-soft); color:var(--gold); }
.mf-meta{ display:flex; flex-direction:column; min-width:0; }
.mf-name{ font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mf-sub{ font-size:0.72rem; color:var(--text-faint); font-family:var(--mono); }
.mf-mini{ flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; }
.mf-mini:hover{ color:var(--gold); border-color:var(--gold); }
.mf-del:hover{ color:var(--danger); border-color:var(--danger); }
.mf-empty{ text-align:center; color:var(--text-dim); padding:26px 8px; font-size:0.88rem; }

.mf-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:12px; font-size:0.82rem; }
.mf-crumb{ background:none; border:none; color:var(--text-dim); cursor:pointer; font:inherit; padding:4px 6px; border-radius:6px; }
.mf-crumb:hover{ color:var(--gold); }
.mf-crumb.active{ color:var(--cyan); }
.mf-sep{ color:var(--text-faint); }
.mf.drag{ outline:2px dashed var(--gold); outline-offset:6px; border-radius:12px; }
.mf-open{ cursor:pointer; }
.mf-uploads{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.mf-up{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.mf-up-top{ display:flex; justify-content:space-between; gap:10px; font-size:0.8rem; margin-bottom:6px; }
.mf-up-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mf-up-pct{ font-family:var(--mono); color:var(--gold); }
.mf-bar-bg{ height:4px; background:var(--border); border-radius:4px; overflow:hidden; }
.mf-bar-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--cyan)); transition:width .2s; }
.mf-up.fail .mf-up-pct{ color:var(--danger); }
.mf-space{ margin-top:14px; text-align:center; font-size:0.75rem; color:var(--text-faint); font-family:var(--mono); }
.mf-modal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.78); align-items:center; justify-content:center; padding:16px; }
.mf-modal.show{ display:flex; }
.mf-modal-box{ background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:16px; width:min(960px,100%); max-height:100%; display:flex; flex-direction:column; overflow:hidden; color:var(--text); }
.mf-modal-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
.mf-modal-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.92rem; }
.mf-modal-body{ padding:14px; overflow:auto; text-align:center; }
.mf-view{ max-width:100%; max-height:72vh; border-radius:8px; }
.mf-pdf{ width:100%; height:72vh; border:none; background:#fff; }
.mf-text{ text-align:left; white-space:pre; flex:1 1 auto; font-family:var(--mono); font-size:0.82rem; line-height:1.6; margin:0; padding:12px 14px; }

/* Line numbers (MEGA style) */
.mf-code{ display:flex; align-items:flex-start; overflow-x:auto; background:var(--bg); border:1px solid var(--border-strong); border-radius:10px; }
.mf-gutter{
  flex:none; margin:0; padding:12px 12px 12px 14px; text-align:right; user-select:none; -webkit-user-select:none;
  font-family:var(--mono); font-size:0.82rem; line-height:1.6; color:var(--text-dim);
  background:var(--bg); border-right:1px solid var(--border); min-width:3ch; box-sizing:content-box;
  position:sticky; left:0; z-index:1;
}
.mf-edit-wrap{ display:flex; align-items:stretch; background:var(--bg); border:1px solid var(--border-strong); border-radius:10px; overflow:hidden; }
.mf-edit-wrap:focus-within{ border-color:var(--gold); }
.mf-gutter-edit{ position:static; overflow:hidden; height:auto; padding-bottom:24px; }

.mf-layout-wrap{ position:relative; }
.mf-menu{ display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:50; min-width:200px; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:12px; padding:8px; box-shadow:0 14px 40px rgba(0,0,0,0.55); }
.mf-menu.show{ display:block; }
.mf-menu-title{ font-size:0.72rem; color:var(--text-faint); padding:4px 10px 6px; text-transform:uppercase; letter-spacing:0.05em; }
.mf-menu button{ width:100%; display:flex; align-items:center; gap:12px; background:none; border:none; color:var(--text); padding:9px 10px; border-radius:8px; cursor:pointer; font:inherit; font-size:0.88rem; text-align:left; }
.mf-menu button:hover{ background:var(--gold-soft); }
.mf-menu button i:first-child{ width:18px; text-align:center; color:var(--text-dim); }
.mf-menu button span{ flex:1; }
.mf-tick{ visibility:hidden; color:var(--cyan); }
.mf-menu button.active .mf-tick{ visibility:visible; }
.mf-ico img{ width:100%; height:100%; object-fit:cover; display:block; }
.mf-pick-box{ width:min(460px,100%); }
.mf-pick-crumbs{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:10px 14px 0; font-size:0.8rem; }
.mf-pick-list{ padding:10px 14px; overflow:auto; display:flex; flex-direction:column; gap:6px; max-height:46vh; min-height:120px; text-align:left; }
.mf-pick-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; color:var(--text); font:inherit; font-size:0.88rem; text-align:left; }
.mf-pick-row:hover{ border-color:var(--gold); }
.mf-pick-row i{ color:var(--gold); }
.mf-pick-foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 14px; border-top:1px solid var(--border); }
.mf-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10001; background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--text); padding:10px 16px; border-radius:10px; font-size:0.85rem; box-shadow:0 10px 30px rgba(0,0,0,0.5); max-width:90vw; }

/* Text editor in preview modal */
.mf-modal-actions{ display:flex; gap:6px; align-items:center; }
.mf-editor{
  flex:1 1 auto; min-width:0; min-height:60vh; resize:vertical; box-sizing:border-box;
  background:var(--bg); color:var(--text); border:none;
  padding:12px; font-family:var(--mono); font-size:0.82rem;
  line-height:1.6; tab-size:2; white-space:pre; overflow:auto;
}
.mf-editor:focus{ outline:none; }

/* List (roomier rows) */
.mf-l-list{ gap:12px; }
.mf-l-list .mf-item{ padding:14px 16px; }
.mf-l-list .mf-ico{ width:54px; height:54px; font-size:1.3rem; }
.mf-l-list .mf-name{ font-size:1rem; white-space:normal; }
.mf-l-list .mf-sub{ font-size:0.78rem; margin-top:2px; }

/* Grid (cards) */
.mf-l-grid, .mf-l-gallery{ display:grid; gap:12px; }
.mf-l-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.mf-l-grid .mf-item{ display:grid; grid-template-columns:repeat(3,1fr); justify-items:center; gap:8px; padding:14px 10px 10px; text-align:center; }
.mf-l-grid .mf-open{ grid-column:1/-1; flex-direction:column; gap:10px; width:100%; }
.mf-l-grid .mf-ico{ width:64px; height:64px; font-size:1.6rem; }
.mf-l-grid .mf-meta{ align-items:center; width:100%; }
.mf-l-grid .mf-name{ max-width:100%; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }

/* Gallery (big thumbnails) */
.mf-l-gallery{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.mf-l-gallery .mf-item{ position:relative; display:flex; flex-direction:column; align-items:stretch; padding:0; overflow:hidden; }
.mf-l-gallery .mf-open{ flex-direction:column; align-items:stretch; gap:0; }
.mf-l-gallery .mf-ico{ width:100%; height:150px; border-radius:0; font-size:2.6rem; overflow:hidden; }
.mf-l-gallery .mf-meta{ padding:8px 10px 10px; }

/* 3-dot options menu */
.mf-item{ position:relative; }
.mf-more-wrap{ position:relative; flex:none; }
.mf-l-grid .mf-more-wrap, .mf-l-gallery .mf-more-wrap{ position:absolute; top:8px; right:8px; z-index:5; }
.mf-l-gallery .mf-item{ overflow:visible; }
.mf-l-gallery .mf-ico{ border-radius:12px 12px 0 0; }
.mf-l-gallery .mf-more{ background:rgba(10,13,19,0.72); border-color:rgba(255,255,255,0.18); color:var(--text); }
.mf-pop{ display:none; position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:160px; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:12px; padding:6px; box-shadow:0 14px 40px rgba(0,0,0,0.55); text-align:left; }
.mf-pop.show{ display:block; }
.mf-pop button{ width:100%; display:flex; align-items:center; gap:10px; background:none; border:none; color:var(--text); padding:9px 10px; border-radius:8px; cursor:pointer; font:inherit; font-size:0.86rem; }
.mf-pop button:hover{ background:var(--gold-soft); }
.mf-pop button i{ width:16px; text-align:center; color:var(--text-dim); }
.mf-pop .mf-del-opt, .mf-pop .mf-del-opt i{ color:var(--danger); }

.mf-ico{ overflow:hidden; }
.mf-l-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.mf-l-grid .mf-ico{ width:100%; height:110px; font-size:2rem; border-radius:10px; }

/* Grid: full width, 4 per row on desktop */
#myfileMain, .mf, #mfList{ width:100%; max-width:100%; }
.mf-l-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mf-l-gallery{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mf-l-grid .mf-ico{ height:90px; }
.mf-l-gallery .mf-ico{ height:120px; }
@media (max-width:900px){
  .mf-l-grid, .mf-l-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:560px){
  .mf-l-grid, .mf-l-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== Mobile fit fix (My File cut-off) ===== */
html,body{ max-width:100%; overflow-x:hidden; }
main{ min-width:0; max-width:100%; }            /* lets flex child shrink to screen width */
#view-myfile .sec-wrap, #view-myfile .sec-wrap.mf-wide{ max-width:100%; width:100%; }
.mf, .mf-bar, .mf-list, .mf-item{ min-width:0; max-width:100%; }
.mf-bar{ flex-wrap:wrap; }
.mf-name, .mf-up-name{ min-width:0; }
@media (max-width:560px){
  #view-myfile .sec-wrap{ padding:22px 14px; }
  .mf-bar input[type=text]{ flex:1 1 100%; }     /* search on its own row */
  .mf-bar .mf-btn{ flex:1 1 auto; text-align:center; }
  .mf-bar .mf-layout-wrap{ flex:0 0 auto; }
  .mf-menu{ right:auto; left:0; max-width:calc(100vw - 48px); }
}