*{box-sizing:border-box}
:root{
 --bg:#030912;--panel:rgba(8,20,35,.76);--panel2:rgba(10,27,47,.78);
 --line:rgba(129,168,211,.18);--text:#f5f8ff;--muted:#91a2bb;
 --blue:#338df0;--blue2:#2468d8;--danger:#e85d6d;
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#030912;color:var(--text)}
button,input,textarea{font:inherit}button{color:inherit}.hidden{display:none!important}.screen{min-height:100vh}

/* LOCK */
.lock-screen{position:relative;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.lock-backdrop,.lock-overlay{position:absolute;inset:0;z-index:-2}
.lock-backdrop{background:#050b14 center/cover no-repeat;transform:scale(1.03);filter:saturate(.82)}
.lock-overlay{z-index:-1;background:linear-gradient(180deg,rgba(2,8,17,.78),rgba(2,8,17,.22) 42%,rgba(2,8,17,.88))}
.lock-top{display:flex;justify-content:space-between;align-items:flex-start;padding:32px 42px}
.lock-brand{font-size:16px;letter-spacing:1px}.lock-sub{font-size:11px;color:#9daac0;margin-top:3px}
.top-icon{border:0;background:transparent;font-size:27px;color:#d7dfed;cursor:pointer}
.lock-center{width:min(620px,92vw);margin:auto;text-align:center;display:flex;align-items:center;flex-direction:column}
.lock-logo{width:104px;height:104px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.65);background:rgba(15,42,73,.72);box-shadow:0 12px 40px #0008;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lock-logo img{width:100%;height:100%;object-fit:cover;display:none}.lock-logo.has-image img{display:block}.lock-logo.has-image #lockLogoFallback{display:none}
#lockLogoFallback{font-weight:800;font-size:27px}
.clock{font-size:76px;font-weight:200;letter-spacing:-3px;margin-top:22px;text-shadow:0 5px 30px #0009}.date{font-size:17px;color:#c0cad9;margin-top:5px}
.lock-divider{display:flex;gap:13px;align-items:center;margin-top:31px;color:#c6d0df;font-size:13px}.lock-divider b{font-weight:400;letter-spacing:8px}.lock-space{font-size:13px;color:#aab7ca;margin-top:12px}
.login-form{width:min(470px,90vw);margin-top:32px}.password-wrap{height:62px;border:1px solid rgba(255,255,255,.18);border-radius:34px;background:rgba(15,27,45,.55);backdrop-filter:blur(18px);display:flex;align-items:center;padding:5px 6px 5px 20px;box-shadow:0 10px 40px #0005}.password-icon{font-size:20px;color:#d7dfed}.password-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;padding:0 14px;font-size:16px}.password-wrap input::placeholder{color:#8795aa}.unlock-btn{width:52px;height:52px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--blue),#275dce);font-size:25px;cursor:pointer}.error{height:24px;margin-top:9px;color:#ff8794;font-size:13px}.lock-bottom{display:flex;justify-content:center;gap:20px;color:#a7b1c0;font-size:13px;padding:28px}.lock-bottom span:first-child,.lock-bottom span:last-child{color:#778393}

/* APP */
.app-screen{position:relative;overflow:hidden;background:#040b14}.app-background{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;opacity:.58;filter:blur(.4px) saturate(.95)}.app-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(3,11,20,.36),rgba(3,10,18,.24),rgba(3,10,18,.34));z-index:0;pointer-events:none}
.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line);background:rgba(3,11,20,.72);backdrop-filter:blur(18px);position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:12px}.plain-logo{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#173962;overflow:hidden;padding:0;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.plain-logo img{width:100%;height:100%;object-fit:cover;display:none}.plain-logo.has-image img{display:block}.plain-logo.has-image #appLogoFallback{display:none}.brand-name{font-size:16px;letter-spacing:1px}.brand-sub{font-size:11px;color:#8e9bb0;margin-top:2px}.top-actions{display:flex;gap:8px}.top-action{width:40px;height:40px;border:0;background:transparent;color:#c8d1df;font-size:22px;border-radius:12px;cursor:pointer}.top-action:hover{background:rgba(255,255,255,.07)}
.layout{display:grid;grid-template-columns:205px 1fr;min-height:calc(100vh - 86px);position:relative;z-index:2}.sidebar{border-right:1px solid var(--line);background:rgba(3,13,24,.66);backdrop-filter:blur(18px);padding:28px 18px;display:flex;flex-direction:column}.nav-item{width:100%;border:0;background:transparent;color:#aebbd0;padding:13px 15px;border-radius:24px;text-align:left;cursor:pointer;margin-bottom:7px;font-size:14px}.nav-item span{display:inline-block;width:28px;font-size:17px}.nav-item.active,.nav-item:hover{background:linear-gradient(100deg,rgba(42,119,218,.55),rgba(28,73,132,.3));color:#eaf3ff}.connection{margin-top:auto;display:flex;align-items:center;gap:9px;color:#aebbd0;font-size:12px}.connection i,.about-status i{width:8px;height:8px;border-radius:50%;background:#22d39a;box-shadow:0 0 10px #22d39a;display:block}.connection small{display:block;color:#667992;margin-top:3px}
.content{padding:44px 42px;max-width:1300px;width:100%;margin:0 auto}.page{display:none}.active-page{display:block}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px}.page-head h1{font-size:28px;margin:0 0 7px}.page-head p{margin:0;color:#8192aa;font-size:13px}.page-head.simple{margin-bottom:26px}
.primary-btn{border:0;border-radius:13px;background:linear-gradient(100deg,#2e8ef1,#2865d4);color:white;padding:13px 19px;font-weight:700;cursor:pointer;box-shadow:0 10px 28px rgba(28,106,216,.22)}.primary-btn:hover{filter:brightness(1.08)}.glass-btn{border:1px solid var(--line);background:rgba(255,255,255,.045);color:#dce6f4;border-radius:13px;padding:12px 17px;cursor:pointer}.toolbar{display:flex;gap:12px;margin-bottom:22px}.search-box{height:54px;flex:1;border:1px solid var(--line);background:rgba(7,19,33,.7);border-radius:15px;display:flex;align-items:center;padding:0 17px;backdrop-filter:blur(10px)}.search-box span{font-size:22px;color:#9aabc1}.search-box input{flex:1;border:0;outline:0;background:transparent;color:#fff;padding:0 12px}.search-box input::placeholder{color:#71829a}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.note-card{min-height:175px;padding:20px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(11,30,52,.82),rgba(5,17,30,.75));backdrop-filter:blur(14px);cursor:pointer;transition:.18s;position:relative;overflow:hidden}.note-card:hover{transform:translateY(-2px);border-color:rgba(79,145,218,.48);box-shadow:0 15px 35px #0004}.note-card h3{margin:0 0 12px;font-size:16px}.note-card p{margin:0;color:#9aaac0;font-size:13px;line-height:1.6;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.note-date{position:absolute;bottom:15px;left:20px;font-size:10px;color:#64758d}.note-menu{position:absolute;right:15px;bottom:12px;color:#7e8ea4}.empty{text-align:center;padding:100px 20px;color:#8191a8}.empty-art{font-size:44px;color:#5c7190;margin-bottom:14px}.empty h2{color:#e8eef8;margin:0 0 7px}.empty p{margin:0 0 22px}

/* SETTINGS / ABOUT */
.settings-card,.about-card{border:1px solid var(--line);border-radius:18px;background:rgba(7,21,36,.72);backdrop-filter:blur(15px);overflow:hidden;max-width:720px}.setting-row{width:100%;display:grid;grid-template-columns:46px 1fr 25px;gap:12px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:20px;cursor:pointer}.setting-row:last-child{border-bottom:0}.setting-row:hover{background:rgba(255,255,255,.035)}.setting-icon{width:38px;height:38px;border-radius:11px;background:rgba(49,128,224,.14);display:grid;place-items:center;color:#75aff4}.setting-row b{display:block;font-size:14px}.setting-row small{display:block;color:#72849c;margin-top:4px}.setting-row strong{color:#8191a8;font-size:25px;font-weight:400}.about-card{padding:45px;text-align:center}.about-logo{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:auto;background:linear-gradient(135deg,#3088eb,#224eac);font-weight:800;font-size:23px}.about-card h2{margin:20px 0 8px}.about-card p{color:#8292a8;line-height:1.7;max-width:500px;margin:auto}.about-status{display:flex;justify-content:center;align-items:center;gap:8px;color:#93a3b8;margin-top:25px;font-size:12px}

/* MODAL */
.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.68);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}.modal-card{width:min(720px,100%);background:linear-gradient(150deg,#0b2139,#061422);border:1px solid rgba(117,161,211,.22);border-radius:22px;padding:25px;box-shadow:0 30px 90px #0009}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal-head small{color:#6e87a5;font-size:9px;letter-spacing:2px}.modal-head h2{margin:5px 0 0;font-size:22px}.close-btn{border:0;background:rgba(255,255,255,.05);border-radius:10px;width:38px;height:38px;font-size:24px;color:#aebbd0;cursor:pointer}.modal-card input,.modal-card textarea{width:100%;border:1px solid var(--line);background:#061321;color:#fff;border-radius:13px;padding:15px;outline:0}.modal-card textarea{min-height:280px;resize:vertical;margin-top:12px;line-height:1.6}.modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.action-right{display:flex;gap:9px}.danger-btn{border:0;background:rgba(232,93,109,.16);color:#ff8794;border-radius:12px;padding:12px 17px;cursor:pointer}

@media(max-width:800px){.topbar{padding:0 20px}.layout{grid-template-columns:1fr}.sidebar{display:flex;position:fixed;bottom:0;left:0;right:0;height:68px;z-index:10;padding:7px 10px;border-right:0;border-top:1px solid var(--line);flex-direction:row}.sidebar nav{display:flex;width:100%;justify-content:space-around}.nav-item{margin:0;width:auto;padding:8px 12px;text-align:center}.nav-item span{width:auto;margin-right:5px}.connection{display:none}.content{padding:30px 18px 95px}.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.lock-top{padding:24px 20px}.clock{font-size:61px}.lock-logo{width:92px;height:92px}.page-head{align-items:flex-start;flex-direction:column}.page-head .primary-btn{width:100%}.notes-grid{grid-template-columns:1fr}.toolbar{flex-direction:row}.search-box{min-width:0}.app-screen .topbar{height:72px}.brand-sub{display:none}.content{padding-top:25px}.about-card{padding:30px 20px}}


/* ===== Khagen Singha RESPONSIVE FIT FIX =====
   Keeps every existing feature/design, but prevents buttons,
   cards and controls from becoming wider than the viewport. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  max-width: 100%;
}

.app-screen,
.app-screen .layout,
.app-screen .content,
.app-screen .page,
.app-screen .page-head,
.app-screen .toolbar,
.app-screen .notes-grid,
.app-screen .settings-card,
.app-screen .about-card {
  min-width: 0;
  width: 100%;
}

.content {
  overflow-x: hidden;
}

.page-head > *,
.toolbar > *,
.notes-grid > * {
  min-width: 0;
  max-width: 100%;
}

.primary-btn,
.glass-btn,
.search-box,
.note-card,
.setting-row {
  max-width: 100%;
}

.search-box {
  min-width: 0;
}

.search-box input {
  min-width: 0;
  width: 100%;
}

.note-card {
  overflow: hidden;
}

@media (max-width: 800px) {
  .topbar {
    width: 100%;
    max-width: 100%;
  }

  .layout {
    width: 100%;
    max-width: 100%;
  }

  .content {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .page-head {
    width: 100%;
    max-width: 100%;
  }

  .page-head > div {
    width: 100%;
    min-width: 0;
  }

  /* Full-width mobile New Note button, without flex + gap overflow. */
  .page-head .primary-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
  }

  .toolbar {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: stretch;
  }

  .toolbar .search-box {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .toolbar .glass-btn {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    padding-left: 0;
    padding-right: 0;
  }

  .notes-grid {
    width: 100%;
    max-width: 100%;
  }

  .note-card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand {
    min-width: 0;
  }

  .brand > div {
    min-width: 0;
  }

  .top-actions {
    flex: 0 0 auto;
  }

  .top-action {
    width: 38px;
    height: 38px;
  }

  .content {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 25px;
    padding-bottom: 92px;
  }

  .page-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 22px;
  }

  .page-head h1 {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.12;
  }

  .page-head p {
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .page-head .primary-btn {
    height: 58px;
    padding: 0 16px;
    font-size: 18px;
    border-radius: 15px;
  }

  .toolbar {
    gap: 10px;
    margin-bottom: 18px;
  }

  .search-box {
    height: 52px;
    padding-left: 14px;
    padding-right: 10px;
  }

  .search-box input {
    font-size: 16px;
    padding-left: 8px;
    padding-right: 4px;
  }

  .toolbar .glass-btn {
    flex-basis: 52px;
    width: 52px;
    min-width: 52px;
    height: 52px;
  }

  .notes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .note-card {
    min-height: 165px;
    padding: 19px;
  }

  .setting-row {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    padding: 17px 15px;
  }

  .setting-row small {
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .modal {
    padding: 10px;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 18px;
    border-radius: 18px;
  }

  .modal-card textarea {
    min-height: 220px;
  }

  .action-right {
    min-width: 0;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-name {
    font-size: 15px;
  }

  .top-action {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }

  .page-head .primary-btn {
    font-size: 17px;
  }

  .toolbar .glass-btn {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
  }
}

/* ===== FINAL VIEWPORT-BOUND LAYOUT =====
   Mobile uses the viewport as the hard boundary. Nothing is allowed
   to create a wider layout; controls are sized from the real viewport. */
html, body {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

.screen,
.app-screen,
.app-screen .layout,
.app-screen .content {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}

@media (max-width: 800px) {
  .app-screen {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app-screen .layout {
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
  }

  .app-screen .content {
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: hidden;
  }

  .app-screen .page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .page-head {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-head > div {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-head .primary-btn {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 16px 0 0 0;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }

  .toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .toolbar .search-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .toolbar .glass-btn {
    width: 52px;
    max-width: 52px;
    min-width: 52px;
    padding: 0;
  }

  .notes-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .note-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .settings-card,
  .about-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .modal-card {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .app-screen .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-head .primary-btn {
    height: 58px;
    margin-top: 16px;
    font-size: 18px;
    border-radius: 15px;
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
}

@media (max-width: 380px) {
  .app-screen .content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .toolbar .glass-btn {
    width: 48px;
    max-width: 48px;
    min-width: 48px;
  }
}
.clock .ampm{font-size:.22em;letter-spacing:1px;margin-left:8px;vertical-align:middle;opacity:.85}
.lock-divider b{letter-spacing:3px!important}
/* simplified layout: no sidebar / bottom nav */
.layout{grid-template-columns:1fr!important;min-height:calc(100vh - 86px)}
.content{padding-bottom:40px!important}
.modal-card textarea{margin-top:16px;min-height:340px}
.password-icon{display:flex;align-items:center;color:#d7dfed}
.unlock-btn{display:flex;align-items:center;justify-content:center;color:#fff;padding:0}
.lock-bottom span:nth-child(2){letter-spacing:.5px;font-style:italic}
/* note options menu */
.note-menu{background:transparent;border:0;font:inherit;font-size:18px;line-height:1;padding:8px 10px;cursor:pointer;right:8px!important;bottom:6px!important;color:#9fb0c7!important;border-radius:10px}
.note-menu:hover{background:rgba(255,255,255,.08)}
.note-menu-pop{position:fixed;z-index:1000;min-width:130px;padding:6px;border:1px solid var(--line);border-radius:14px;background:rgba(10,24,42,.96);backdrop-filter:blur(16px);box-shadow:0 12px 36px #0009}
.note-menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#e6eefb;font-size:15px;padding:11px 14px;border-radius:10px;cursor:pointer}
.note-menu-pop button:hover{background:rgba(255,255,255,.08)}
.note-menu-pop button.danger{color:#ff8794}
/* note cards: keep date/dots clear of the text */
.note-card{padding-bottom:50px!important}
.note-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.note-card p{-webkit-line-clamp:3!important}
.note-date{bottom:17px!important}
/* editor */
.modal{padding:14px}
.modal-card{display:flex;flex-direction:column;max-height:calc(100dvh - 28px);padding:22px}
.modal-head{margin-bottom:14px}
.modal-card textarea{flex:1 1 auto;min-height:220px!important;height:min(58dvh,480px);margin-top:0!important;resize:none!important;font:inherit;font-size:16px;line-height:1.7;padding:16px 18px;border-radius:16px;background:#050f1b;color:#eaf1fb;caret-color:#4f9bff;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2a4466 transparent}
.modal-card textarea:focus{border-color:rgba(79,155,255,.55);box-shadow:0 0 0 3px rgba(79,155,255,.14)}
.modal.viewing .modal-card textarea{cursor:text;background:#071522}
.modal-actions{flex:0 0 auto;gap:10px}
/* wider editor, smaller text */
.modal{padding:8px!important}
.modal-card{width:min(900px,100%)!important;padding:16px 12px!important;border-radius:20px}
.modal-head{padding:0 6px}
.modal-actions{padding:0 6px}
.modal-card textarea{font-size:14px!important;line-height:1.65!important;padding:14px 12px!important;border-radius:14px!important}
/* stop pull-to-refresh / page scroll while editing */
html,body{overscroll-behavior-y:none}
html.modal-open,html.modal-open body{overflow:hidden;height:100%;overscroll-behavior:none}
.modal{overscroll-behavior:none}
.modal-card textarea{overscroll-behavior:contain;touch-action:pan-y}
.modal-card{touch-action:pan-y}

/* slide handle beside the text box */
.editor-wrap{position:relative;flex:1 1 auto;display:flex;min-height:0}
.editor-wrap textarea{scrollbar-width:none}
.editor-wrap textarea::-webkit-scrollbar{display:none}

/* refresh buttons */
.refresh-icon{display:flex;align-items:center;justify-content:center;color:#d7dfed;width:42px;height:42px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.06);cursor:pointer;-webkit-tap-highlight-color:transparent}
.refresh-icon:active{background:rgba(255,255,255,.14)}
.refresh-icon.spinning svg{animation:spinIt .8s linear infinite}
@keyframes spinIt{to{transform:rotate(360deg)}}

/* editor open: the browser must never start its own touch gestures (pull-to-refresh, page scroll) */
.modal,.modal *{touch-action:none!important}
.modal button,.modal .close-btn{touch-action:manipulation!important}
html.modal-open,html.modal-open body{overflow:hidden!important;overscroll-behavior:none!important;position:fixed;width:100%;inset:0}


/* compact storage indicator (lock screen + app header) */
.usage-mini{margin-top:7px;width:150px}
.usage-mini-text{font-size:11px;color:#9fb0c7;white-space:nowrap}
.usage-mini-bar{height:4px;margin-top:5px;border-radius:3px;background:rgba(120,165,220,.2);overflow:hidden}
.usage-mini-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#3a8dff,#2a62d6);transition:width .4s}
.topbar{height:auto!important;min-height:72px;padding-top:10px!important;padding-bottom:10px!important}
.topbar .usage-mini{margin-top:5px}

.page-head h1{font-size:24px;line-height:1.3;margin:0 0 4px}
/* page heading: smaller, cleaner */
.page-head h1{font-size:clamp(15px,4.4vw,21px)!important;font-weight:600!important;letter-spacing:.3px!important;line-height:1.35!important;margin:0!important;color:#e8eefb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.page-head{margin-bottom:14px!important}
.page-head>div:first-child{min-width:0;max-width:100%}

/* centered, professional page heading */
.page-head{flex-direction:column!important;align-items:stretch!important;gap:16px}
.page-head>div:first-child{width:100%;text-align:center}
.page-head h1{font-family:"Georgia","Times New Roman",serif!important;font-size:clamp(20px,6vw,26px)!important;font-weight:600!important;letter-spacing:.8px!important;text-align:center;white-space:normal;color:#eef3fc}
.page-head h1::after{content:"";display:block;width:46px;height:2px;margin:10px auto 0;border-radius:2px;background:linear-gradient(90deg,#3a8dff,#2a62d6)}
.page-head .primary-btn{align-self:center;width:100%;max-width:100%}

.lock-actions{display:flex;gap:10px;align-items:flex-start}
.top-actions{display:flex;gap:10px;align-items:center}

/* motto sits above the profile image */
.lock-motto{padding:0!important;margin:0 0 26px;gap:14px!important;font-size:13px;align-items:center}

/* motto bends around the profile image */
.lock-logo-wrap{position:relative;display:inline-block;margin-top:30px}
.lock-arc{position:absolute;left:50%;top:50%;width:192%!important;max-width:none!important;height:auto;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.lock-arc text{font-size:11.5px;font-style:italic;letter-spacing:.7px;fill:#c3cddd;text-shadow:0 1px 6px #000a}
/* tabs */
.tabs{display:flex;gap:6px;padding:4px;margin:0 auto 18px;width:100%;max-width:340px;border:1px solid var(--line);border-radius:14px;background:rgba(8,20,36,.7);backdrop-filter:blur(12px)}
.tab{flex:1;border:0;background:transparent;color:#9fb0c7;font-size:14px;font-weight:600;padding:10px 0;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tab.active{color:#fff;background:linear-gradient(100deg,#2e8ef1,#2865d4);box-shadow:0 6px 18px rgba(28,106,216,.28)}
/* files */
.files-list{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.file-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(11,30,52,.82),rgba(5,17,30,.75));backdrop-filter:blur(14px)}
.file-icon{flex:0 0 46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.5px;color:#fff}
.file-icon.pdf{background:linear-gradient(135deg,#e5484d,#b4232a)}
.file-icon.img{background:linear-gradient(135deg,#2fb67c,#1d8a5c)}
.file-icon.doc{background:linear-gradient(135deg,#3b82f6,#2154c4)}
.file-icon.xls{background:linear-gradient(135deg,#34a853,#1f7a3a)}
.file-icon.other{background:linear-gradient(135deg,#6b7a90,#46546a)}
.file-info{flex:1;min-width:0}
.file-name{font-size:15px;font-weight:600;color:#eaf1fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-size:12px;color:#8ea0b8;margin-top:3px}
.file-actions{display:flex;gap:8px}
.file-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#dbe6f6;font-size:13px;font-weight:600;padding:9px 13px;border-radius:10px;cursor:pointer}
.file-btn.view{background:rgba(46,142,241,.18);border-color:rgba(79,155,255,.4);color:#cfe3ff}
.file-btn.del{color:#ff8794}
.file-btn:disabled{opacity:.6}
.files-note{text-align:center;font-size:12px;color:#7f93ad;margin-top:16px}
@media(max-width:560px){.file-row{flex-wrap:wrap}.file-actions{width:100%;justify-content:flex-end}}
/* PDF editor */
html.pdfed-open,html.pdfed-open body{overflow:hidden;overscroll-behavior:none}
.pdfed{position:fixed;inset:0;z-index:1500;display:flex;flex-direction:column;background:#0b1626;color:#e6eefb;height:100dvh}
.pdfed.hidden{display:none}
.pdfed-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:#09121f}
.pdfed-title{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.pe-btn{border:1px solid var(--line);background:rgba(255,255,255,.07);color:#e6eefb;font-size:16px;min-width:40px;height:40px;padding:0 14px;border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pe-btn.primary{background:linear-gradient(100deg,#2e8ef1,#2865d4);border:0;font-weight:700;font-size:14px}
.pe-btn:disabled{opacity:.4}
.pdfed-tools{display:flex;align-items:center;gap:8px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--line);background:#0a1524;scrollbar-width:none}
.pdfed-tools::-webkit-scrollbar{display:none}
.pe-tool{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#cdd9ec;font-size:13px;font-weight:600;padding:9px 13px;border-radius:10px;cursor:pointer;white-space:nowrap}
.pe-tool.active{background:rgba(46,142,241,.25);border-color:rgba(79,155,255,.6);color:#fff}
.pe-tool.danger{color:#ff8794}
.pe-field{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:#9fb0c7}
.pe-field input[type=number]{width:54px;height:34px;border-radius:9px;border:1px solid var(--line);background:#06101c;color:#fff;padding:0 6px;font-size:14px}
.pe-field input[type=color]{width:38px;height:34px;border:1px solid var(--line);border-radius:9px;background:#06101c;padding:2px}
.pdfed-hint{font-size:12px;color:#8ea0b8;text-align:center;padding:6px 12px}
.pdfed-stage{flex:1;overflow:auto;padding:8px;background:#1a2638;position:relative;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pdfed-page{position:relative;margin:0 auto;background:#fff;box-shadow:0 6px 24px #0009}
.pdfed-page canvas{display:block}
.pdfed-overlay{position:absolute;inset:0;cursor:text}
.pdfed-status{position:absolute;left:50%;top:40%;transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:rgba(0,0,0,.65);font-size:14px}
.pdfed-status.hidden{display:none}
.pdfed-nav{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);background:#09121f}
.pdfed-nav span{font-size:13px;min-width:56px;text-align:center;color:#c3cddd}
.pe-sep{width:14px}
.pe-item{position:absolute}
.pe-text{min-width:40px;min-height:1.2em;line-height:1.2;white-space:pre;outline:none;font-family:Helvetica,Arial,sans-serif;padding:0;border:1px dashed transparent;caret-color:#2865d4}
.pe-item.selected .pe-text{border-color:rgba(40,101,212,.9);background:rgba(255,255,255,.35)}
.pe-item.cover{background:#fff;border:1px dashed rgba(40,101,212,.5)}
.pe-item.cover.selected{border-color:#2865d4}
.pe-handle,.pe-resize{display:none;position:absolute;width:26px;height:26px;border-radius:50%;background:#2865d4;color:#fff;align-items:center;justify-content:center;font-size:15px;touch-action:none;box-shadow:0 2px 8px #0007}
.pe-item.selected .pe-handle,.pe-item.selected .pe-resize{display:flex}
.pe-handle{left:-30px;top:-30px}
.pe-resize{right:-13px;bottom:-13px;border-radius:7px;width:22px;height:22px}
.pe-resize::after{content:"";width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff}
/* read-only PDF viewer */
#pdfEditBtn{display:none}
.pdfed.viewing #pdfEditBtn{display:inline-flex;align-items:center}
.pdfed.viewing #pdfSaveBtn,.pdfed.viewing .pdfed-tools{display:none}
.pdfed.viewing .pdfed-overlay{cursor:default}
/* note / file counters */
.count-pill{display:inline-block;margin-top:10px;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(46,142,241,.14);color:#bcd6ff;font-size:12px;font-weight:600;letter-spacing:.3px}
.tab-count{display:inline-block;min-width:20px;margin-left:5px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;line-height:1.5}
.tab.active .tab-count{background:rgba(255,255,255,.25)}

/* the app scrolls inside its own container, so long lists always scroll on phones */
.app-screen:not(.hidden){position:fixed!important;inset:0;height:100vh;height:100dvh;display:flex!important;flex-direction:column;overflow:hidden!important}
.app-screen:not(.hidden) .topbar{flex:0 0 auto}
.app-screen:not(.hidden) .layout{flex:1 1 auto;min-height:0!important;display:flex!important;flex-direction:column}
.app-screen:not(.hidden) .content{flex:1 1 auto;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding-bottom:48px!important}
/* PDF: search bar, results, highlights, page swipe */
.pdfed-search{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:#0a1524}
.pdfed-search input{flex:1;min-width:0;height:40px;border:1px solid var(--line);background:#07111e;color:#eaf1fb;border-radius:11px;padding:0 12px;font:inherit;font-size:15px}
.pdfed-search input::placeholder{color:#7a8ca5}
.pdfed-search .pe-btn{min-width:54px}
.pdfed-stage{touch-action:pan-y}
.pdfed-page{will-change:transform,opacity}
.pdfed-hl{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pdfed-hl .hl{position:absolute;background:rgba(255,214,10,.42);border-radius:2px;mix-blend-mode:multiply}
.pdfed-hl .hl.cur{background:rgba(255,140,0,.55);box-shadow:0 0 0 2px rgba(255,140,0,.8)}
.pe-results{position:absolute;left:0;right:0;bottom:56px;max-height:52%;display:flex;flex-direction:column;background:#0f1c2e;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px #0008;z-index:5}
.pe-results.hidden{display:none}
.pe-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 8px 16px;font-size:13px;font-weight:600;color:#cfdcf0}
.pe-results-head .pe-btn{height:34px;min-width:36px;padding:0 10px}
.pe-results-list{overflow-y:auto;overscroll-behavior:contain;padding:0 10px 12px;display:flex;flex-direction:column;gap:6px}
.pe-result{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#dbe6f6;border-radius:12px;padding:10px 12px;cursor:pointer}
.pe-result-page{font-size:11px;font-weight:700;color:#7fb2ff;letter-spacing:.4px;text-transform:uppercase}
.pe-result-text{font-size:13px;line-height:1.4;color:#c3cfe2}
.pe-result-text mark{background:rgba(255,214,10,.35);color:#fff;border-radius:3px;padding:0 2px}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:4000;max-width:90vw;text-align:center;padding:11px 18px;border-radius:12px;background:rgba(18,32,52,.96);border:1px solid var(--line);color:#eaf1fb;font-size:14px;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* photo-style PDF zoom */
.pdfed-stage{overflow:hidden!important;padding:0!important;touch-action:none!important;min-height:0;user-select:none;-webkit-user-select:none}
.pdfed-page{position:absolute!important;left:0;top:0;margin:0!important;transform-origin:0 0;will-change:transform,opacity}
.pdfed-page .pe-text{user-select:text;-webkit-user-select:text}
#lockLogo{pointer-events:none;cursor:default}

/* search box now stands alone: use the full row (the old rules reserved a column for the removed refresh button) */
.toolbar,.app-screen .toolbar{display:block!important;grid-template-columns:1fr!important}
.toolbar .search-box,.app-screen .toolbar .search-box{width:100%!important;max-width:none!important;box-sizing:border-box}