/* ══════════════════════════════════════
   PASSGUARD — style.css  (mobile-first)
══════════════════════════════════════ */
:root {
  --bg:       #0F1629;
  --surface:  #1E2A45;
  --surface2: #263350;
  --border:   #2E3F60;
  --cyan:     #00D4FF;
  --cyan-dim: rgba(0,212,255,0.12);
  --white:    #F0F4FF;
  --muted:    #8892A4;
  --danger:   #FF4D6A;
  --success:  #00E5A0;
  --warning:  #FFB547;
  --r:        10px;
  --font:     'Inter', system-ui, sans-serif;
  --mono:     'JetBrains Mono', monospace;
}

body.light-theme{
  --bg:       #F4F6FB;
  --surface:  #FFFFFF;
  --surface2: #F0F2F8;
  --border:   #DDE3EF;
  --cyan:     #0090C4;
  --cyan-dim: rgba(0,144,196,0.10);
  --white:    #1A2033;
  --muted:    #6B7690;
  --danger:   #D63A56;
  --success:  #00A876;
  --warning:  #C97F0E;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--white);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.hidden{display:none!important;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}

/* ── AUTH ── */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden;}
.auth-bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(0,212,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;}
.auth-container{position:relative;z-index:1;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 24px;box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 80px rgba(0,212,255,0.06);}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.logo-icon{font-size:28px;}
.logo-text{font-size:24px;font-weight:700;letter-spacing:-0.5px;}
.auth-tagline{color:var(--muted);font-size:13px;margin-bottom:22px;}
.auth-tabs{display:flex;background:var(--bg);border-radius:8px;padding:4px;margin-bottom:20px;gap:4px;}
.auth-tab{flex:1;padding:9px;border:none;border-radius:6px;background:transparent;color:var(--muted);font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;}
.auth-tab.active{background:var(--surface);color:var(--white);box-shadow:0 1px 4px rgba(0,0,0,0.3);}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-error{background:rgba(255,77,106,0.12);border:1px solid rgba(255,77,106,0.3);border-radius:8px;padding:10px 14px;color:#FF8099;font-size:13px;}
.auth-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--muted);opacity:.7;}
.forgot-row{display:flex;justify-content:flex-end;margin-top:-6px;}

/* ── INPUTS ── */
.input-group{display:flex;flex-direction:column;gap:5px;}
.input-group label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;color:var(--white);font-family:var(--font);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;appearance:none;}
input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.6;}
textarea{resize:vertical;min-height:70px;}
.mono{font-family:var(--mono);font-size:13px;}
select option{background:var(--surface);}
.input-reveal{position:relative;display:flex;align-items:center;}
.input-reveal input{padding-right:42px;}
.reveal-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:15px;padding:4px;opacity:.6;}
.reveal-btn:hover{opacity:1;}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ── BUTTONS ── */
.btn-primary{padding:11px 20px;background:var(--cyan);color:var(--bg);border:none;border-radius:8px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s,transform .15s;white-space:nowrap;}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-primary.full{width:100%;}
.btn-secondary{padding:10px 18px;background:transparent;color:var(--muted);border:1.5px solid var(--border);border-radius:8px;font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-secondary:hover{border-color:var(--muted);color:var(--white);}
.btn-danger{padding:10px 18px;background:rgba(255,77,106,0.12);color:var(--danger);border:1.5px solid rgba(255,77,106,0.3);border-radius:8px;font-family:var(--font);font-size:14px;cursor:pointer;white-space:nowrap;}
.btn-danger:hover{background:rgba(255,77,106,0.2);}
.link-btn{background:none;border:none;color:var(--cyan);font-size:13px;cursor:pointer;padding:0;}

/* ── APP LAYOUT ── */
.app-screen{display:flex;flex-direction:column;height:100vh;overflow:hidden;}

/* Mobile top bar */
.mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
.hamburger{background:none;border:none;color:var(--white);font-size:22px;cursor:pointer;padding:4px 8px;}
.mobile-logo{font-size:17px;font-weight:700;color:var(--white);}
.btn-add-sm{background:var(--cyan);color:var(--bg);border:none;border-radius:8px;font-size:22px;font-weight:700;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}

/* Sidebar overlay */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:98;backdrop-filter:blur(4px);}

/* Sidebar */
.sidebar{position:fixed;top:0;left:-260px;width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);z-index:99;display:flex;flex-direction:column;padding:0;transition:left .25s ease;overflow-y:auto;}
.sidebar.open{left:0;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--border);font-size:17px;font-weight:700;color:var(--white);}
.sidebar-close{margin-left:auto;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px;}
.sidebar-nav{padding:12px 8px;display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:all .15s;}
.nav-item:hover{background:var(--surface2);color:var(--white);}
.nav-item.active{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(0,212,255,0.2);}
.nav-icon{font-size:17px;}
.nav-label{flex:1;}
.nav-count{background:var(--surface2);color:var(--muted);font-size:12px;padding:2px 7px;border-radius:99px;min-width:22px;text-align:center;}
.nav-item.active .nav-count{background:rgba(0,212,255,0.15);color:var(--cyan);}
.sidebar-bottom{padding:12px 8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.user-pill{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:var(--surface2);}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--cyan-dim);border:2px solid var(--cyan);color:var(--cyan);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.user-info{display:flex;flex-direction:column;overflow:hidden;}
.user-name{font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-email{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn-logout{width:100%;padding:9px;background:transparent;color:var(--muted);border:1.5px solid var(--border);border-radius:8px;font-family:var(--font);font-size:13px;cursor:pointer;}
.btn-logout:hover{color:var(--danger);border-color:rgba(255,77,106,0.4);}

/* Main content */
.main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;background:var(--bg);}
.main-header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:10px;flex-wrap:wrap;background:var(--bg);}
.header-left{}
.page-title{font-size:18px;font-weight:700;color:var(--white);letter-spacing:-0.3px;}
.header-right{display:flex;align-items:center;gap:8px;}
.search-bar{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;}
.search-bar:focus-within{border-color:var(--cyan);}
.search-bar input{background:transparent;border:none;color:var(--white);font-size:14px;width:130px;padding:0;outline:none;}
.btn-add{padding:9px 16px;background:var(--cyan);color:var(--bg);border:none;border-radius:8px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;display:none;}

/* Vault grid */
.vault-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:0 16px 24px;}

/* Vault card */
.vault-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:all .15s;position:relative;overflow:hidden;}
.vault-card:active{transform:scale(0.98);}
.card-header{display:flex;align-items:center;justify-content:space-between;}
.card-icon{font-size:20px;}
.card-type-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:99px;}
.tag-document {background:rgba(100,180,255,0.15);color:#64B4FF;}
.tag-credential{background:rgba(255,181,71,0.15);color:var(--warning);}
.tag-apikey{background:rgba(0,229,160,0.15);color:var(--success);}
.tag-url{background:rgba(160,100,255,0.15);color:#A064FF;}
.card-title{font-size:15px;font-weight:600;color:var(--white);}
.card-sub{font-size:12px;color:var(--cyan);font-weight:500;}
.card-preview{font-size:13px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.card-date{font-size:11px;color:var(--muted);opacity:.7;}
.card-env{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:99px;}
.env-production{background:rgba(0,229,160,0.1);color:var(--success);}
.env-staging{background:rgba(255,181,71,0.1);color:var(--warning);}
.env-development{background:rgba(100,180,255,0.1);color:#64B4FF;}
.env-test{background:rgba(160,100,255,0.1);color:#A064FF;}

/* Empty state */
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:60px 24px;color:var(--muted);}
.empty-icon{font-size:52px;margin-bottom:8px;}
.empty-state h3{font-size:18px;font-weight:600;color:var(--white);}
.empty-state p{font-size:14px;max-width:280px;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(10,15,30,0.9);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:0;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,0.5);display:flex;flex-direction:column;}
.modal-view{border-radius:20px 20px 0 0;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0;gap:12px;position:sticky;top:0;background:var(--surface);z-index:1;}
.modal-header h2{font-size:17px;font-weight:700;}
.modal-close{background:var(--surface2);border:none;color:var(--muted);font-size:15px;width:32px;height:32px;border-radius:8px;cursor:pointer;flex-shrink:0;}
.modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px;flex:1;}
.modal-footer{display:flex;align-items:center;gap:10px;padding:12px 20px 20px;position:sticky;bottom:0;background:var(--surface);}

/* Type picker */
.type-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;color:var(--muted);font-family:var(--font);font-size:18px;cursor:pointer;transition:all .15s;}
.type-btn span{font-size:11px;font-weight:500;}
.type-btn.active{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.type-fields{display:flex;flex-direction:column;gap:14px;}
.doc-subfields{display:flex;flex-direction:column;gap:12px;}

/* Subtype tag on card */
.card-subtype{font-size:11px;color:var(--muted);}

/* View modal fields */
.view-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:99px;}
.view-field{display:flex;flex-direction:column;gap:5px;}
.view-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.view-value{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;font-size:14px;color:var(--white);word-break:break-all;white-space:pre-wrap;}
.view-value.mono-val{font-family:var(--mono);font-size:13px;}
.view-value-row{display:flex;}
.view-value-row .view-value{flex:1;border-radius:8px 0 0 8px;}
.copy-btn{background:var(--surface2);border:1.5px solid var(--border);border-left:none;border-radius:0 8px 8px 0;color:var(--muted);padding:0 14px;cursor:pointer;font-size:13px;white-space:nowrap;}
.copy-btn:hover{color:var(--cyan);}

/* ── Favorite toggle ── */
.fav-toggle{width:100%;padding:10px 12px;background:var(--surface2,var(--surface));border:1.5px solid var(--border);border-radius:8px;color:var(--muted);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;}
.fav-toggle.active{color:var(--warning);border-color:rgba(255,181,71,0.4);background:rgba(255,181,71,0.08);}
.fav-star-btn{background:none;border:none;font-size:18px;cursor:pointer;line-height:1;padding:2px;color:var(--muted);}
.fav-star-btn.active{color:var(--warning);}
.card-fav-star{position:absolute;top:14px;right:14px;font-size:15px;}

/* ── Tag chips ── */
.tag-chips{display:flex;flex-wrap:wrap;gap:6px;}
.tag-chip{font-size:10px;font-weight:600;padding:3px 9px;border-radius:99px;background:rgba(0,212,255,0.1);color:var(--cyan);border:1px solid rgba(0,212,255,0.25);}

/* ── File dropzone (add/edit modal) ── */
.file-dropzone{border:1.5px dashed var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:all .15s;background:rgba(255,255,255,0.02);}
.file-dropzone:hover{border-color:var(--cyan);background:var(--cyan-dim);}
#file-dropzone-empty{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;justify-content:center;padding:6px 0;}
.file-drop-icon{font-size:20px;}
#file-dropzone-filled{display:flex;align-items:center;gap:10px;}
.file-chip-icon{font-size:22px;}
.file-chip-info{display:flex;flex-direction:column;flex:1;min-width:0;}
.file-chip-name{font-size:13px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-chip-size{font-size:11px;color:var(--muted);}
.file-chip-remove{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px 8px;}
.file-chip-remove:hover{color:var(--danger);}
.file-upload-progress{height:5px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:8px;}
.file-upload-bar{height:100%;width:0%;background:var(--cyan);transition:width .2s;}

/* ── File preview (view modal) ── */
.file-preview-box{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.02);}
.file-preview-img{width:100%;max-height:220px;object-fit:contain;display:block;background:#0A0F1E;}
.file-preview-row{display:flex;align-items:center;gap:12px;padding:12px;}
.file-preview-icon{font-size:28px;}
.file-preview-meta{flex:1;min-width:0;}
.file-preview-name{font-size:13px;color:var(--white);word-break:break-all;}
.file-preview-size{font-size:11px;color:var(--muted);}
.file-preview-actions{display:flex;gap:8px;padding:0 12px 12px;flex-wrap:wrap;}
.file-preview-actions .btn-secondary,.file-preview-actions .btn-danger{padding:8px 14px;font-size:12px;}

/* ── Lock Screen ── */
.lock-screen{position:fixed;inset:0;background:var(--bg);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;}
.lock-box{width:100%;max-width:340px;text-align:center;}
.lock-icon{font-size:44px;margin-bottom:10px;}
.lock-box h2{font-size:20px;margin:0 0 6px;color:var(--white);}
.lock-sub{color:var(--muted);font-size:13px;margin-bottom:20px;}
.lock-box .input-group{margin-bottom:14px;}
.lock-box input{width:100%;padding:12px 14px;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;color:var(--white);font-size:16px;text-align:center;letter-spacing:4px;font-family:var(--font);box-sizing:border-box;}

/* ── Security Center ── */
.sec-section{border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:4px;}
.sec-section:last-child{border-bottom:none;}
.sec-section h3{font-size:14px;margin:0 0 6px;color:var(--white);}
.sec-desc{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.5;}
.sec-status{font-size:12px;font-weight:600;margin-bottom:10px;padding:8px 12px;border-radius:8px;background:rgba(0,229,160,0.08);color:var(--success);border:1px solid rgba(0,229,160,0.25);}
.sec-status.warn{background:rgba(255,181,71,0.08);color:var(--warning);border-color:rgba(255,181,71,0.25);}
.sec-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;}
.sec-empty{font-size:12px;color:var(--muted);padding:8px 0;}
.sec-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;}
.sec-item-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sec-item-title{color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sec-item-sub{color:var(--muted);font-size:11px;}
.sec-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--cyan-dim);color:var(--cyan);white-space:nowrap;}
.sec-revoke-btn{background:none;border:1px solid var(--border);color:var(--danger);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;white-space:nowrap;}
.sec-revoke-btn:hover{background:rgba(255,77,106,0.1);}
#autolock-select{width:100%;padding:11px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;color:var(--white);font-family:var(--font);font-size:14px;}
.btn-secondary.active{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}

/* ── Dashboard ── */
.dashboard-view{display:flex;flex-direction:column;gap:20px;}
.dash-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.dash-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;}
.dash-stat-icon{font-size:20px;}
.dash-stat-value{font-size:24px;font-weight:700;color:var(--white);}
.dash-stat-label{font-size:12px;color:var(--muted);}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:800px){.dash-cols{grid-template-columns:1fr;}}
.dash-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;}
.dash-section h3{font-size:14px;margin:0 0 12px;color:var(--white);}
.dash-list{display:flex;flex-direction:column;gap:8px;}
.dash-list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:8px;background:var(--surface2);font-size:12px;}
.dash-list-main{display:flex;flex-direction:column;gap:1px;min-width:0;}
.dash-list-title{color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-list-sub{color:var(--muted);font-size:11px;}
.dash-badge-danger{background:rgba(255,77,106,0.15);color:var(--danger);font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;}
.dash-badge-warn{background:rgba(255,181,71,0.15);color:var(--warning);font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;}
.score-card{display:flex;align-items:center;gap:16px;}
.score-ring{width:80px;height:80px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--white);position:relative;}
.score-ring::before{content:'';position:absolute;inset:7px;background:var(--surface);border-radius:50%;}
.score-ring span{position:relative;z-index:1;}
.score-tips{font-size:12px;color:var(--muted);line-height:1.6;}

/* ── Team Collaboration ── */
.team-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;}
.role-badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.3px;}
.role-owner{background:rgba(255,181,71,0.15);color:var(--warning);}
.role-editor{background:rgba(0,212,255,0.12);color:var(--cyan);}
.role-viewer{background:var(--surface2);color:var(--muted);}
.status-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.3px;}
.status-pending{background:rgba(255,181,71,0.15);color:var(--warning);}
.status-approved{background:rgba(0,229,160,0.15);color:var(--success);}
.status-rejected{background:rgba(255,77,106,0.15);color:var(--danger);}
.comment-item{background:var(--surface2);border-radius:8px;padding:9px 11px;font-size:12px;}
.comment-author{color:var(--cyan);font-weight:600;font-size:11px;}
.comment-time{color:var(--muted);font-size:10px;margin-left:6px;}
.comment-text{color:var(--white);margin-top:3px;}
.comment-input-row{display:flex;gap:8px;margin-top:10px;}
.comment-input-row input{flex:1;padding:9px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;color:var(--white);font-family:var(--font);font-size:13px;}

/* ── Admin Panel ── */
.admin-role-select{background:var(--surface);color:var(--white);border:1px solid var(--border);border-radius:6px;font-size:11px;padding:4px 6px;font-family:var(--font);}
.storage-bar-track{width:100%;height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:4px;}
.storage-bar-fill{height:100%;background:var(--cyan);border-radius:99px;}

/* ── Broadcast banner ── */
.broadcast-banner{position:fixed;top:0;left:0;right:0;background:var(--cyan);color:#08131f;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;font-weight:600;z-index:1000;}
.broadcast-banner button{background:none;border:none;color:#08131f;font-size:14px;cursor:pointer;opacity:.7;}
.broadcast-banner button:hover{opacity:1;}
.masked{letter-spacing:.12em;color:var(--muted);}
.inline-reveal{background:none;border:none;color:var(--cyan);font-size:12px;cursor:pointer;padding:0;font-family:var(--font);}
.view-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.view-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);padding-bottom:4px;border-bottom:1px solid var(--border);}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1.5px solid var(--border);border-radius:8px;padding:12px 20px;font-size:14px;font-weight:500;color:var(--white);z-index:999;white-space:nowrap;animation:slideUp .2s ease;box-shadow:0 4px 20px rgba(0,0,0,0.4);}
.toast.success{border-color:rgba(0,229,160,0.4);color:var(--success);}
.toast.error{border-color:rgba(255,77,106,0.4);color:var(--danger);}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* ── TABLET & DESKTOP ── */
@media(min-width:640px){
  .vault-grid{grid-template-columns:repeat(2,1fr);}
  .search-bar input{width:180px;}
  .modal-overlay{align-items:center;padding:20px;}
  .modal{border-radius:18px;max-height:88vh;}
}
@media(min-width:900px){
  .mobile-topbar{display:none;}
  .sidebar{position:fixed;left:0;top:0;height:100vh;}
  .app-screen{flex-direction:row;}
  .main-content{margin-left:260px;}
  .vault-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0 24px 28px;}
  .main-header{padding:22px 24px 16px;}
  .btn-add{display:block;}
  .btn-add-sm{display:none;}
  .hamburger{display:none;}
  .vault-card:hover{border-color:rgba(0,212,255,0.4);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.3);}
}
@media(min-width:1200px){
  .vault-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
}

/* View modal fields */
.view-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.view-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.vf{display:flex;flex-direction:column;gap:4px;}
.vl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.vv{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;font-size:13px;color:var(--white);word-break:break-all;white-space:pre-wrap;}
.vv.mono{font-family:var(--mono);}
.vv-row{display:flex;}
.vv-row .vv{flex:1;border-radius:8px 0 0 8px;}
.copy-btn{background:var(--surface2);border:1.5px solid var(--border);border-left:none;border-radius:0 8px 8px 0;color:var(--muted);padding:0 14px;cursor:pointer;font-size:12px;white-space:nowrap;font-family:var(--font);}
.copy-btn:hover{color:var(--cyan);}
.masked{letter-spacing:.12em;color:var(--muted);}
.inline-reveal{background:none;border:none;color:var(--cyan);font-size:12px;cursor:pointer;padding:0;margin-top:2px;font-family:var(--font);}
.card-sub{font-size:12px;color:var(--cyan);font-weight:500;}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:99px;margin:12px auto 0;}
.type-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;color:var(--muted);font-family:var(--font);font-size:18px;cursor:pointer;transition:all .15s;}
.type-btn span{font-size:11px;font-weight:500;}
.type-btn.active{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.nav-label{flex:1;}