/**
 * ==============================================================================
 * ORBITAL NOTES — CORE APPLICATION STYLESHEET
 * ==============================================================================
 * Architecture: Clean, encapsulated styling structure preserving 100% of the
 * dark theme visual identity, typography, micro-interactions and PWA stability.
 *
 * Sections:
 *   1. FONTS & DESIGN TOKENS
 *   2. CSS RESETS & GLOBAL BASE
 *   3. ICON SYSTEM & MASK UTILITIES
 *   4. APP SHELL & TOPBAR
 *   5. EXPANDABLE SEARCH BAR
 *   6. FLOATING PRIMARY NAVIGATION
 *   7. VIEW CONTROLLER & LAYOUT TOGGLE
 *   8. NOTES GRID & COMPACT LIST VIEWS
 *   9. NOTE CARDS & HASHTAG CHIPS
 *  10. MULTI-SELECTION & BATCH ACTIONS
 *  11. FULLSCREEN NOTE EDITOR & CHECKLISTS
 *  12. SETTINGS DRAWER & ACCENT CUSTOMIZATION
 *  13. TRASH LIFECYCLE & RETENTION MODAL
 *  14. TOAST NOTIFICATIONS & MICRO-INTERACTIONS
 *  15. ACCESSIBILITY, FOCUS RINGS & REDUCED MOTION
 *  16. RESPONSIVE BREAKPOINTS
 * ==============================================================================
 */
/* 1. FONTS & DESIGN TOKENS */
@font-face{font-family:"Noto Sans";src:url('../fonts/noto-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url('../fonts/noto-sans-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Local";src:url('../fonts/noto-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Local";src:url('../fonts/noto-sans-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* styles.css */
:root{color-scheme:dark;--bg:#020709;--surface:#10191d;--surface2:#17262c;--text:#f4f8f9;--muted:#8fa3aa;--line:#29404a;--accent:#eab308;--accent-hover:#facc15;--accent-soft:rgba(234,179,8,0.14);--accent-glow:rgba(234,179,8,0.35);--accent-subtle:rgba(234,179,8,0.08);--shadow:0 18px 50px #0009;font-family:"Noto Sans","Noto Sans Local",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{min-height:100dvh}button,input,textarea{font:inherit}.topbar{position:sticky;top:0;z-index:30;height:66px;display:grid;grid-template-columns:minmax(240px,680px) 1fr;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:11px;font-size:18px}.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 7px 22px var(--accent-glow)}.search{height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid transparent;border-radius:14px;background:var(--surface2);color:var(--muted)}.search:focus-within{border-color:var(--accent);background:var(--surface)}.search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text)}.search kbd{font-size:10px;border:1px solid var(--line);padding:3px 6px;border-radius:6px}.head-actions{justify-self:end;display:flex}.icon-button{width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;font-size:20px}.icon-button:hover,.icon-button.active{background:var(--surface2);color:var(--accent)}.shell{display:grid;min-height:calc(100dvh - 66px)}nav,.nav{min-height:46px;display:flex;align-items:center;gap:14px;width:100%;padding:0 16px;border:0;border-radius:14px;background:transparent;color:var(--muted);font-size:14px;font-weight:650;text-align:left;cursor:pointer}.nav span{width:20px;text-align:center;font-size:18px}.nav:hover{background:var(--surface2);color:var(--text)}.nav.active{background:var(--accent-soft);color:var(--accent)}.file{position:relative}.file input{position:absolute;opacity:0;pointer-events:none}main{min-width:0;padding:34px clamp(18px,4vw,60px) 90px}.quick-new{display:flex;justify-content:space-between;align-items:center;width:min(680px,100%);height:56px;margin:0 auto 34px;padding:0 20px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--muted);box-shadow:0 8px 28px #071b2614;cursor:text}.quick-new b{font-size:22px;color:var(--accent)}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section-title h1{margin:0 0 3px;font-size:22px}.section-title p{margin:0;color:var(--muted);font-size:13px}.notes-grid{columns:4 240px;column-gap:14px}.notes-grid.list{columns:1;max-width:800px}.note{display:inline-block;position:relative;width:100%;margin:0 0 14px;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--note,var(--surface));color:var(--card-text,var(--text));break-inside:avoid;cursor:pointer;transition:transform .15s,box-shadow .15s}.note:hover{transform:translateY(-2px);box-shadow:0 10px 26px #071b261a}.note h2{margin:0 32px 8px 0;font-size:16px;overflow-wrap:anywhere}.note p{margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.48}.pin{position:absolute;right:14px;top:13px;color:var(--accent)}.chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}.chip{padding:4px 8px;border-radius:999px;background:#68727822;font-size:10px;font-weight:650}.note-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;color:#677278;font-size:10px}.note-actions button{width:32px;height:32px}.checks{display:grid;gap:6px;margin:9px 0}.check-preview{display:flex;gap:7px;font-size:13px}.check-preview.done{opacity:.55;text-decoration:line-through}.box{width:15px;height:15px;flex:0 0 15px;border:1.5px solid;border-radius:4px}.empty{min-height:45vh;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--muted)}.empty img{width:72px;height:72px;border-radius:22px;opacity:.82}.empty h2{margin:16px 0 4px;color:var(--text)}.empty p{margin:0 0 20px}.primary,.fab{border:0;border-radius:13px;background:linear-gradient(145deg,var(--accent-hover),var(--accent));color:#000000;font-weight:750;cursor:pointer}.primary{padding:11px 18px}.fab{display:none;position:fixed;right:22px;bottom:24px;z-index:25;width:58px;height:58px;font-size:28px;box-shadow:var(--shadow)}.link{border:0;background:transparent;color:var(--text);cursor:pointer}.danger{color:#d75f68}.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:15px}.modal-backdrop{position:absolute;inset:0;border:0;background:#0009;backdrop-filter:blur(3px)}.editor-card{position:relative;width:min(760px,100%);height:min(740px,calc(100dvh - 30px));display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:var(--note,var(--surface));color:var(--card-text,var(--text));box-shadow:var(--shadow);overflow:hidden}.editor-head{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid #68727833}.editor-head small{color:var(--muted)}.editor-head>div{display:flex;margin-left:auto}.editor-body{flex:1;overflow:auto;padding:22px 26px}.note-title,.editor-body textarea{width:100%;border:0;outline:0;background:transparent;color:inherit}.note-title{margin-bottom:14px;font-size:23px;font-weight:760}.editor-body textarea{min-height:270px;resize:none;font-size:16px;line-height:1.58}.counter{text-align:right;color:var(--muted);font-size:11px}.labels{display:flex;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid #68727833;color:var(--muted)}.labels input{flex:1;border:0;outline:0;background:transparent;color:inherit}.editor-foot{min-height:66px;display:flex;align-items:center;gap:16px;padding:10px 18px;border-top:1px solid #68727833}.editor-foot>small{margin-left:auto;color:var(--muted)}.type-tabs{display:flex;padding:3px;border-radius:10px;background:#6872781c}.type-tabs button{border:0;padding:7px 10px;border-radius:8px;background:transparent;color:inherit;cursor:pointer}.type-tabs button.active{background:var(--surface);color:var(--accent);font-weight:700}.colors{display:flex;gap:7px}.color{width:24px;height:24px;border:2px solid var(--surface);border-radius:50%;box-shadow:0 0 0 1px var(--line);cursor:pointer}.color.active{box-shadow:0 0 0 2px var(--accent)}.checklist{display:grid;gap:7px}.check-row{display:grid;grid-template-columns:22px 1fr 34px;align-items:center;gap:6px}.check-row input[type=text]{min-width:0;border:0;border-bottom:1px solid #68727855;padding:8px 2px;outline:0;background:transparent;color:inherit}.check-row.done input[type=text]{opacity:.55;text-decoration:line-through}.add-item{margin:10px 0;border:0;background:transparent;color:inherit;cursor:pointer}.toasts{position:fixed;right:18px;bottom:18px;z-index:100;display:grid;gap:7px}.toast,.error{padding:12px 16px;border-radius:12px;background:var(--text);color:var(--bg);box-shadow:var(--shadow);font-size:13px}.error{margin-top:18px;background:#a4313c;color:#fff}.hidden{display:none!important}
@media(max-width:800px){.topbar{grid-template-columns:42px 1fr auto;height:62px;padding:0 11px;gap:7px}.brand img{width:38px;height:38px}.search{height:42px}.search kbd{display:none}.shell{display:block}main{padding:24px 14px 94px}.notes-grid{columns:2 155px;column-gap:11px}.note{margin-bottom:11px;padding:14px}.fab{display:block}.editor-card{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}.modal{padding:0}.editor-body{padding:20px}.editor-foot{flex-wrap:wrap}.editor-foot>small{display:none}}@media(max-width:420px){.quick-new{display:none}.notes-grid{columns:1}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* luxe.css */
/* V6: lista sofisticada com blur concentrado e baixo custo. */
:root{--bg:#090b0d;--surface:#202326;--surface2:#2a2e31;--text:#f6f7f7;--muted:#9ba2a6;--line:#34393c;font-family:"Noto Sans","Noto Sans Local",sans-serif}body{background:radial-gradient(circle at 50% -10%,#2b3034 0,transparent 38%),var(--bg);letter-spacing:-.01em}.topbar{background:rgba(16,18,20,.76);border-color:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand strong,.section-title h1{font-weight:720;letter-spacing:-.035em}.search{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.07);box-shadow:inset 0 1px rgba(255,255,255,.04)}.search:focus-within{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18);box-shadow:0 0 0 3px rgba(17,168,244,.1)}.nav{font-weight:590}.nav.active{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.05)}main{max-width:1040px;width:100%;margin:0 auto;padding-top:30px}.quick-new{max-width:760px;margin-bottom:30px;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 40px rgba(0,0,0,.16)}.section-title{max-width:760px;margin-left:auto;margin-right:auto}.section-title h1{font-size:28px}.section-title p{font-size:12px}.notes-grid,.notes-grid.list{columns:1;max-width:760px;margin:0 auto}.note{display:block;min-height:126px;margin-bottom:11px;padding:18px 56px 16px 132px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(145deg,rgba(22,25,30,.98) 0%,rgba(6,7,9,1) 100%);color:var(--text);box-shadow:inset 0 1px rgba(255,255,255,.07),0 16px 36px rgba(0,0,0,.6);overflow:hidden;transform:translate3d(0,0,0);backface-visibility:hidden;contain:layout style paint;content-visibility:auto;contain-intrinsic-size:auto 126px}.note::before{content:"";position:absolute;left:13px;top:13px;width:100px;height:100px;border-radius:17px;background-color:var(--note);background-image:url('../icons/icon-192.png');background-position:center;background-repeat:no-repeat;background-size:54px;box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 18px rgba(0,0,0,.25)}.note:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px rgba(255,255,255,.1),0 20px 42px rgba(0,0,0,.7)}.note h2{margin:4px 36px 6px 0;font-size:18px;font-weight:680;letter-spacing:-.025em}.note p{display:-webkit-box;margin-bottom:7px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#c8cdcf;line-height:1.45}.note .checks{max-height:46px;overflow:hidden;margin:6px 0}.note .chips{margin:6px 0}.note-foot{margin-top:4px;color:#8f979b}.pin{right:20px;top:18px}.note-actions{position:absolute;right:9px;bottom:8px;display:flex;opacity:.25;transition:opacity .15s}.note:hover .note-actions,.note:focus-within .note-actions{opacity:1}.empty{max-width:760px;margin:auto}.empty img{box-shadow:0 18px 44px rgba(0,0,0,.3)}.modal-backdrop{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.editor-card{border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(16,19,24,.92) 0%,rgba(3,4,6,.98) 100%);box-shadow:0 36px 90px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.12)}.editor-head,.editor-foot{background:rgba(255,255,255,.025);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.primary,.fab{box-shadow:0 12px 34px rgba(17,168,244,.28)}@media(max-width:800px){body{background:radial-gradient(circle at 50% -6%,#303539 0,transparent 30%),var(--bg)}main{max-width:none;padding-top:22px}.section-title h1{font-size:25px}.note{min-height:116px;padding:15px 45px 14px 113px;border-radius:20px}.note::before{left:11px;top:11px;width:94px;height:94px;border-radius:16px;background-size:49px}.note h2{font-size:17px}.note p{-webkit-line-clamp:2}.note-actions{opacity:.7}}@media(max-width:420px){.note{min-height:105px;padding-left:102px}.note::before{width:82px;height:82px;background-size:43px}.note h2{font-size:16px}.note p{font-size:13px}.chips{display:none}}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar{background:#15181a}.modal-backdrop{background:rgba(0,0,0,.8)}}

/* theme-fixes.css */
.topbar{background:rgba(16,18,20,.76)}.note p{color:#c8cdcf}

/* media.css */
*,*::before,*::after,html,body,button,input,textarea,select,kbd{font-family:"Noto Sans","Noto Sans Local",sans-serif}.image-preview{position:relative;margin:0 0 16px;border-radius:17px;overflow:hidden;background:#111}.image-preview img{display:block;width:100%;max-height:280px;object-fit:cover}.remove-image{position:absolute;right:10px;top:10px;width:36px;height:36px;border:1px solid #ffffff33;border-radius:50%;background:#090b0dcc;color:#fff;font-size:22px;cursor:pointer}.counter{display:flex;align-items:center;gap:10px}.counter #charCount{margin-left:auto}.image-button{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:#ffffff0c;color:inherit;font-size:12px;cursor:pointer}.image-button input{position:absolute;opacity:0;pointer-events:none}.image-button:hover{background:#ffffff15}.image-button.busy{opacity:.55;pointer-events:none}#imageStatus{color:var(--muted);font-size:10px}.note.has-image::before{background-size:cover}.notes-grid{contain:layout style}.note{content-visibility:auto;contain-intrinsic-size:126px;will-change:auto}.topbar{transform:translateZ(0)}main{overflow-anchor:none}.editor-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-gutter:auto}.notes-grid{scroll-margin-top:76px}@media(max-width:800px){.topbar{grid-template-columns:42px 42px minmax(0,1fr) auto}.search{min-width:0}.search input{width:100%}.image-preview img{max-height:220px}.note{contain-intrinsic-size:116px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.note,.toast{transition:none!important}}

/* media-image.css */
.note.has-image::before{background-image:var(--preview);background-size:cover}

/* settings.css */
.ui-icon{display:inline-block;width:20px;height:20px;flex:0 0 20px;background:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}.icon-notes{mask-image:url('../icons/notes.svg');-webkit-mask-image:url('../icons/notes.svg')}.icon-pinned{mask-image:url('../icons/pinned.svg');-webkit-mask-image:url('../icons/pinned.svg')}.icon-archive{mask-image:url('../icons/archive.svg');-webkit-mask-image:url('../icons/archive.svg')}.icon-delete{mask-image:url('../icons/delete.svg');-webkit-mask-image:url('../icons/delete.svg')}.icon-settings{mask-image:url('../icons/settings.svg');-webkit-mask-image:url('../icons/settings.svg')}.icon-save{mask-image:url('../icons/save.svg');-webkit-mask-image:url('../icons/save.svg')}.save-note-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;margin:0;border:1px solid var(--accent-glow);border-radius:12px;background:linear-gradient(135deg,var(--accent-soft) 0%,var(--accent-subtle) 55%,rgba(0,0,0,.6) 100%);color:var(--text);font-size:13px;font-weight:700;letter-spacing:-.01em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 20px var(--accent-glow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1),box-shadow .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1)}.save-note-btn:hover{background:linear-gradient(135deg,var(--accent-soft) 0%,var(--accent-glow) 55%,rgba(5,10,16,.7) 100%);border-color:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 26px var(--accent-glow);transform:translateY(-1px)}.save-note-btn:active{transform:scale(.98)}.save-note-btn .ui-icon{width:16px;height:16px;background:currentColor}@media(max-width:480px){.save-note-btn{height:33px;padding:0 12px;font-size:12px}.save-note-btn .ui-icon{width:14px;height:14px}}.nav .ui-icon{width:21px;height:21px}.settings-nav{margin-top:14px}.settings-panel{display:grid;gap:12px;max-width:760px;margin:0 auto}.setting-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,rgba(16,18,22,.75) 0%,rgba(5,6,8,.85) 100%);box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 18px rgba(0,0,0,.35);transition:border-color .15s ease}.setting-card h2{margin:2px 0 3px;font-size:15.5px;font-weight:650;color:var(--text)}.setting-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.42}.eyebrow{display:block;color:var(--accent);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}.setting-backup,.setting-customization{display:block}.backup-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.setting-action{min-width:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);color:var(--text);text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}.setting-action-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:16px;font-weight:700}.setting-action-text strong{display:block;font-size:12.5px;font-weight:650;color:var(--text)}.setting-action-text small{display:block;margin-top:1px;color:var(--muted);font-size:10px;line-height:1.3}.setting-action:hover{border-color:var(--accent);background:var(--accent-subtle);transform:translateY(-1px)}.local-data{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:rgba(255,255,255,.02);color:var(--muted)}.local-data-dot{color:#4cc98a;font-size:11px;line-height:1;flex-shrink:0}.local-data p{margin:0}.local-data strong,.local-data small{display:block}.local-data strong{color:var(--text);font-size:11.5px;font-weight:600}.local-data small{margin-top:1px;font-size:10px;color:var(--muted)}@media(max-width:700px){.setting-card{align-items:flex-start;padding:14px}.setting-card:not(.setting-backup):not(.setting-customization){flex-direction:column}.backup-actions{grid-template-columns:1fr}.settings-panel{gap:10px}}

/* Personalização: Cores de Destaque */
.customization-card-head {
  margin-bottom: 12px;
}
.accent-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
}
.accent-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.accent-swatch:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
  transform: translateY(-1px);
}
.accent-swatch .accent-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.accent-swatch .accent-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}
.accent-swatch .accent-check-icon {
  display: none;
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
}
.accent-swatch.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 14px var(--accent-soft);
}
.accent-swatch.active .accent-dot {
  transform: scale(1.15);
  box-shadow: 0 0 10px var(--accent);
}
.accent-swatch.active .accent-check-icon {
  display: block;
}
@media (max-width: 480px) {
  .accent-options {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }
  .accent-swatch {
    padding: 8px 2px 6px;
    border-radius: 10px;
  }
  .accent-swatch .accent-dot {
    width: 15px;
    height: 15px;
  }
  .accent-swatch .accent-label {
    font-size: 9.5px;
  }
}

/* navigation.css */
:root{--bg:#000000;--surface:rgba(18,20,24,.75);--surface2:rgba(28,31,36,.65);--line:rgba(255,255,255,.08);--shadow:0 24px 60px rgba(0,0,0,.85)}body{background:#000000;color:var(--text)}.topbar{position:sticky;top:0;z-index:30;height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 18px 13px;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(4,5,7,.72) 100%);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand{width:min(760px,100%);justify-content:space-between}.brand h1{margin:0;color:var(--text);font-size:30px;font-weight:720;letter-spacing:-.045em}.brand img{order:2;width:36px;height:36px;border-radius:11px;box-shadow:0 8px 24px rgba(17,168,244,.25)}.search{width:min(760px,100%);height:44px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.search:focus-within{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border-color:rgba(67,200,255,.45);box-shadow:0 0 0 3px rgba(17,168,244,.15),inset 0 1px rgba(255,255,255,.08)}.primary-nav{position:fixed;left:50%;bottom:max(15px,env(safe-area-inset-bottom));z-index:50;width:min(380px,calc(100% - 24px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:linear-gradient(135deg,rgba(18,20,24,.82) 0%,rgba(2,3,4,.9) 100%);box-shadow:0 24px 56px rgba(0,0,0,.75),inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transform:translateX(-50%)}.primary-nav .settings-nav{margin-top:0}.primary-nav .nav{min-height:46px;display:grid;justify-items:center;align-content:center;gap:3px;padding:3px 2px;border-radius:16px;font-size:9px;white-space:nowrap}.primary-nav .nav .ui-icon{width:19px;height:19px;flex-basis:19px}.primary-nav .nav.active{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06));color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.35)}.shell{display:block;min-height:calc(100dvh - 124px)}main{padding-top:19px;padding-bottom:130px}.fab{bottom:102px}.section-title{position:relative}.section-title h1{display:none}.back-home{display:inline-grid;place-items:center;width:38px;height:38px;margin-right:11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--text);font-size:20px;cursor:pointer}.section-title.has-back{align-items:center}.section-title.has-back>div{margin-right:auto}.note-title:focus,.note-title:focus-visible,.editor-card:focus,.editor-card:focus-visible{outline:none!important;border:0!important;box-shadow:none!important}.editor-foot{justify-content:space-between}.editor-foot>small{margin-left:auto}.app-identity{display:flex;align-items:center;gap:12px;max-width:760px;margin:4px auto 0;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.app-identity img{width:42px;height:42px;border-radius:12px}.app-identity strong,.app-identity small{display:block}.app-identity small{margin-top:2px;color:var(--muted);font-size:10px}@media(max-width:600px){.topbar{gap:10px;padding:15px 14px 11px}.brand h1{font-size:28px}.brand img{width:34px;height:34px}.search{height:42px}.primary-nav{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px);padding:7px;border-radius:22px}.primary-nav .nav{min-height:45px;font-size:8.5px}.primary-nav .nav .ui-icon{width:18px;height:18px}.shell{min-height:calc(100dvh - 118px)}main{padding-top:14px;padding-bottom:118px}.fab{bottom:88px}.back-home{width:36px;height:36px;margin-right:9px}.editor-foot{justify-content:flex-start}}

/* floating-nav-fix.css */
.topbar{transform:none}
.empty-trash-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid rgba(239,68,68,.38);border-radius:11px;background:linear-gradient(135deg,rgba(239,68,68,.2) 0%,rgba(160,20,30,.25) 100%);color:#ff858e;font-size:12px;font-weight:650;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;box-shadow:0 4px 14px rgba(239,68,68,.18)}
.empty-trash-btn:hover{background:linear-gradient(135deg,rgba(239,68,68,.34) 0%,rgba(180,25,35,.4) 100%);border-color:rgba(239,68,68,.65);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,68,68,.28)}
.empty-trash-btn:active{transform:scale(.97)}
.empty-trash-btn .ui-icon{width:15px;height:15px;background:currentColor}
.note-actions{position:absolute;right:10px;bottom:8px;display:flex;align-items:center;gap:5px;opacity:.85;transition:opacity .15s}
.note:hover .note-actions,.note:focus-within .note-actions{opacity:1}
.note-actions .icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(20,23,28,.6);color:var(--muted);cursor:pointer;font-size:15px;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.note-actions .icon-button:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.25);transform:scale(1.08)}
.note-actions .icon-button.danger:hover,.note-actions .icon-button[data-action="trash"]:hover,.note-actions .icon-button[data-action="purge"]:hover{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.55);color:#ff7a85}
.note-actions .icon-button[data-action="restore"]:hover{background:rgba(67,200,255,.25);border-color:rgba(67,200,255,.55);color:#43c8ff}
.note-actions .icon-button .ui-icon{width:15px;height:15px}

/* Topbar Header & Search adjustments */
/* Topbar Header & Actions */
header:nth-of-type(1),
.topbar{padding:24px 24px 28px;gap:14px;background:linear-gradient(180deg,#000000 0%,rgba(0,0,0,.98) 45%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 85%,rgba(0,0,0,.15) 94%,rgba(0,0,0,0) 100%)!important;border:none!important;border-bottom:none!important;box-shadow:none!important;-webkit-mask-image:linear-gradient(to bottom,#000000 0%,#000000 72%,rgba(0,0,0,.5) 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000000 0%,#000000 72%,rgba(0,0,0,.5) 88%,transparent 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(760px,100%)}
.brand{display:flex;align-items:center;justify-content:flex-start;gap:13px}
.brand img{order:0!important;margin:0;width:38px;height:38px;border-radius:12px;flex-shrink:0;box-shadow:0 6px 22px rgba(17,168,244,.3);transition:transform .18s ease}
.brand img:hover{transform:scale(1.05)}
.brand h1{order:1!important;margin:0;font-size:29px;font-weight:720;letter-spacing:-.04em}

/* Topbar Actions (Search Icon & Settings Icon) */
.topbar-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.gear-icon{display:inline-block;width:19px;height:19px;flex:0 0 19px;stroke:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.search-icon-svg{display:inline-block;width:18px;height:18px;flex:0 0 18px;stroke:currentColor;transition:transform .2s cubic-bezier(.16,1,.3,1)}

.search-top-btn,
.settings-top-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.025) 100%);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px rgba(255,255,255,.1),0 4px 16px rgba(0,0,0,.35);transition:background .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1),box-shadow .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);flex-shrink:0}
.search-top-btn:hover,
.settings-top-btn:hover{background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%);border-color:rgba(255,255,255,.28);color:#fff;transform:translateY(-1px);box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.5)}
.search-top-btn:hover .search-icon-svg{transform:scale(1.12)}
.settings-top-btn:hover .gear-icon{transform:rotate(45deg)}
.search-top-btn:active,
.search-top-btn.active,
.settings-top-btn:active,
.settings-top-btn.active{background:linear-gradient(135deg,rgba(17,168,244,.24) 0%,rgba(17,168,244,.08) 100%);border-color:rgba(67,200,255,.45);color:#fff;box-shadow:0 0 0 3px rgba(17,168,244,.15)}

/* Expandable Search Bar Container */
.search-container{width:min(760px,100%);margin-top:2px;animation:searchSlideIn .22s cubic-bezier(.16,1,.3,1) both}
.search-container.hidden{display:none!important}
@keyframes searchSlideIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

.search{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 14px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:15px;box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.search:focus-within,
.search:focus{border-color:rgba(255,255,255,.1)!important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.45)!important;outline:none!important}
.search .search-icon-symbol{font-size:18px;color:var(--accent);line-height:1;flex-shrink:0}
.search input{flex:1;min-width:0;height:100%;background:transparent;border:none!important;outline:none!important;box-shadow:none!important;color:var(--text);font-size:14px;caret-color:var(--accent)}
.search input:focus,
.search input:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}
.search input::placeholder{color:var(--muted);opacity:.85}
.search-close-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:rgba(255,255,255,.08);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;flex-shrink:0}
.search-close-btn:hover{background:rgba(239,68,68,.22);color:#ff7a85;transform:scale(1.06)}
.search kbd{display:inline-block;padding:3px 7px;border:1px solid rgba(255,255,255,.12);border-radius:6px;font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.04);line-height:1.2;flex-shrink:0}

/* Settings Drawer in Top-Right Corner */
.settings-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);transition:opacity .18s ease}
.settings-drawer{position:fixed;top:0;right:0;z-index:95;width:min(480px,100vw);max-width:100vw;height:100dvh;display:flex;flex-direction:column;background:#000000 !important;border-left:1px solid rgba(255,255,255,.08);box-shadow:-14px 0 42px rgba(0,0,0,.8);box-sizing:border-box}
.settings-drawer-head{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:16px 20px;border:none !important;border-bottom:none !important;background:linear-gradient(180deg,#000000 0%,rgba(0,0,0,.92) 80%,rgba(0,0,0,0) 100%) !important;flex-shrink:0;z-index:5}
.settings-head-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden}
.settings-head-title h2{margin:0;font-size:18px;font-weight:720;color:var(--text);letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-head-title .gear-icon{width:20px;height:20px;stroke:var(--accent);flex-shrink:0}
.close-settings-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.04);color:var(--text);font-size:16px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;flex-shrink:0}
.close-settings-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);transform:scale(1.04);color:#fff}
.settings-drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:14px 18px 36px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}

/* Trash Section incorporated inside Settings Drawer */
.setting-trash{display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:14px 16px}
.trash-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.trash-card-head>div{min-width:0;flex:1;overflow:hidden}
.trash-heading{margin:2px 0 2px;font-size:15.5px;color:var(--text);font-weight:700;overflow-wrap:break-word;word-break:break-word}
.danger-eyebrow{color:#ff6b77!important}
#trashCountText{margin:0;color:var(--muted);font-size:11.5px;overflow-wrap:break-word;word-break:break-word}
.trash-auto-clean-notice{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.35;opacity:.82;word-break:break-word;overflow-wrap:anywhere}
.trash-notes-list{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-height:280px;overflow-y:auto;overflow-x:hidden;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding-right:2px}
.trash-item{display:flex;flex-direction:column;gap:5px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:7px 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025);transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;overflow:hidden}
.trash-item:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.045)}
.trash-item-main{display:flex;align-items:center;gap:8px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.trash-thumb-mini{width:32px;height:32px;min-width:32px;border-radius:6px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:block}
.trash-thumb-mini img{width:100%;height:100%;object-fit:cover;display:block}
.trash-item-info{display:flex;flex-direction:column;gap:2px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.trash-item-head-line{display:flex;align-items:center;gap:6px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.trash-item-head-line h4,
.trash-item-title{margin:0;font-size:13px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;letter-spacing:-0.01em}
.trash-badge{display:inline-flex;align-items:center;padding:1px 5px;border-radius:4px;font-size:10px;font-weight:600;background:rgba(255,255,255,.08);color:var(--muted);white-space:nowrap;flex-shrink:0}
.trash-badge-check{color:#38bdf8;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25)}
.trash-tags-inline{font-size:10px;color:var(--accent);font-weight:600;white-space:nowrap;flex-shrink:0;max-width:80px;overflow:hidden;text-overflow:ellipsis}
.trash-date{font-size:10.5px;color:var(--muted);white-space:nowrap;flex-shrink:0;margin-left:auto;opacity:.85}
.trash-date.expiring{color:#f59e0b;font-weight:600;opacity:.95}
.trash-snippet{margin:0;color:var(--muted);font-size:11.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.trash-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;flex-shrink:0}
.trash-act-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:26px;min-height:26px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;white-space:nowrap;flex-shrink:0;box-sizing:border-box}
.trash-act-btn.restore{border:1px solid rgba(67,200,255,.35);background:rgba(67,200,255,.1);color:#43c8ff}
.trash-act-btn.restore:hover{background:rgba(67,200,255,.24);border-color:rgba(67,200,255,.65);color:#fff;transform:translateY(-1px)}
.trash-act-btn.danger{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.1);color:#ff858e}
.trash-act-btn.danger:hover{background:rgba(239,68,68,.24);border-color:rgba(239,68,68,.65);color:#fff;transform:translateY(-1px)}
.trash-act-btn .ui-icon{width:11px;height:11px;background:currentColor;flex-shrink:0}
.trash-empty-box{padding:10px 12px;border:1px dashed rgba(255,255,255,.1);border-radius:10px;text-align:center;color:var(--muted);font-size:12px;background:rgba(255,255,255,.015);margin-top:4px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.trash-empty-box p{margin:0;overflow-wrap:break-word;word-break:break-word}

/* Button to open full Trash Modal when > 3 items */
.open-all-trash-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;height:36px;margin-top:8px;padding:0 12px;border:1px solid rgba(17,168,244,.3);border-radius:10px;background:linear-gradient(135deg,rgba(17,168,244,.1) 0%,rgba(17,168,244,.03) 100%);color:var(--text);font-size:12px;font-weight:650;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.open-all-trash-btn:hover{background:linear-gradient(135deg,rgba(17,168,244,.2) 0%,rgba(17,168,244,.06) 100%);border-color:rgba(67,200,255,.6);color:#fff;transform:translateY(-1px)}
.open-all-trash-btn .ui-icon{width:13px;height:13px;background:var(--accent);flex-shrink:0}
.open-all-trash-btn span:nth-child(2),
#openAllTrashBtnText{min-width:0;flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open-all-trash-btn .arrow-indicator{font-size:13px;color:var(--accent);transition:transform .15s ease;flex-shrink:0}
.open-all-trash-btn:hover .arrow-indicator{transform:translateX(2px)}

/* Dedicated Trash Modal Area (IndexedDB Unlimited Storage) */
.trash-modal-backdrop{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .2s ease}
.trash-modal{position:fixed;inset:0;z-index:115;display:grid;place-items:center;padding:20px;overflow-y:auto;overflow-x:hidden;width:100vw;max-width:100vw;box-sizing:border-box}
.trash-modal-dialog{width:min(860px,100%);max-width:100%;min-width:0;max-height:calc(100dvh - 40px);display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(175deg,rgba(16,19,25,.98) 0%,rgba(6,7,10,.99) 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 64px rgba(0,0,0,.85);overflow:hidden;box-sizing:border-box;animation:popScale .25s cubic-bezier(.16,1,.3,1)}
@keyframes popScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.trash-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);flex-shrink:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.trash-modal-title-box{display:flex;align-items:center;gap:13px;min-width:0;flex:1;overflow:hidden;box-sizing:border-box}
.trash-modal-title-box>div{min-width:0;flex:1;overflow:hidden;box-sizing:border-box}
.trash-icon-wrap{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);flex-shrink:0}
.trash-icon-wrap .ui-icon{width:20px;height:20px;background:#ff6b77}
.trash-modal-title-box h2{margin:2px 0 2px;font-size:20px;font-weight:720;color:var(--text);letter-spacing:-.03em;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.trash-modal-title-box p{margin:0;color:var(--muted);font-size:12.5px;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.trash-modal-head-actions{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0;flex-wrap:wrap;box-sizing:border-box}
.trash-head-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;font-size:12.5px;font-weight:650;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;white-space:nowrap;flex-shrink:0;max-width:100%;box-sizing:border-box}
.trash-head-btn.restore{border:1px solid rgba(67,200,255,.35);background:rgba(67,200,255,.12);color:#43c8ff}
.trash-head-btn.restore:hover{background:rgba(67,200,255,.24);border-color:rgba(67,200,255,.65);color:#fff;transform:translateY(-1px)}
.trash-head-btn.danger{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.12);color:#ff858e}
.trash-head-btn.danger:hover{background:rgba(239,68,68,.24);border-color:rgba(239,68,68,.65);color:#fff;transform:translateY(-1px)}
.close-trash-modal-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.05);color:var(--text);font-size:18px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;flex-shrink:0}
.close-trash-modal-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);transform:scale(1.05);color:#fff}
.trash-modal-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.01);flex-shrink:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.trash-search-wrapper{display:flex;align-items:center;gap:9px;flex:1;max-width:420px;height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035);min-width:0;box-sizing:border-box}
.trash-search-wrapper .ui-icon{width:15px;height:15px;background:var(--muted);flex-shrink:0}
.trash-search-wrapper input{width:100%;min-width:0;flex:1;background:transparent;border:none;color:var(--text);font-size:13px;outline:none;box-sizing:border-box}
.trash-filter-count{color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0}
.trash-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 24px;overscroll-behavior:contain;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.all-trash-grid{display:flex;flex-direction:column;gap:5px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.all-trash-card{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
@media (min-width:581px){
  .all-trash-grid .trash-item{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px}
  .all-trash-grid .trash-item-main{flex:1;min-width:0}
  .all-trash-grid .trash-item-actions{width:auto;justify-content:flex-end}
}

@media(max-width:600px){
  .topbar{padding:20px 16px 20px;gap:12px}
  .brand{gap:10px}
  .brand img{width:34px;height:34px}
  .brand h1{font-size:25px}
  .topbar-actions{gap:7px}
  .search-top-btn .search-top-label,
  .settings-top-btn .settings-top-label{display:none}
  .search-top-btn,
  .settings-top-btn{width:40px;height:40px;padding:0;justify-content:center;border-radius:12px}
  .settings-drawer{width:100vw;max-width:100vw;border-left:none;box-sizing:border-box}
  .settings-drawer-head{padding:16px 18px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .settings-drawer-body{padding:18px 16px 32px;gap:14px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .setting-card{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .setting-trash{padding:14px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .trash-notes-list{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .trash-item{padding:7px 10px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .search{height:46px;margin-top:0}
  .search kbd{display:none}
  .trash-modal{padding:0;width:100vw;max-width:100vw;box-sizing:border-box}
  .trash-modal-dialog{max-height:100dvh;height:100dvh;border-radius:0;border:none;width:100vw;max-width:100vw;min-width:0;box-sizing:border-box}
  .trash-modal-head{padding:14px 16px;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .trash-modal-title-box{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .trash-modal-head-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;flex-wrap:wrap}
  .trash-modal-head-actions .trash-head-btn{flex:1;min-width:0;padding:0 8px;font-size:11.5px;justify-content:center}
  .trash-modal-filter-bar{padding:10px 16px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;gap:8px}
  .trash-search-wrapper{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .trash-modal-body{padding:14px 16px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .all-trash-grid{display:flex;flex-direction:column;gap:5px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .all-trash-card{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
}

/* Fluidity & Scroll Jank Elimination */
html{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
body{
  overscroll-behavior-y:none;
}
.notes-grid{
  contain:layout style;
  scroll-margin-top:80px;
}
.note{
  contain:layout style paint;
  content-visibility:auto;
  contain-intrinsic-size:auto 138px;
}
.topbar{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
.primary-nav{
  transform:translate3d(-50%,0,0);
  backface-visibility:hidden;
}

/* Fast and Snappy Notifications */
.toasts{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:999;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-end;
  gap:8px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  cursor:pointer;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(22,25,30,.96);
  color:#f8fafc;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transform:translate3d(0,0,0);
  animation:toast-pop .1s cubic-bezier(.16,1,.3,1) forwards;
  transition:opacity .09s ease-out,transform .09s ease-out;
  will-change:transform,opacity;
  user-select:none;
}
.toast.out{
  opacity:0;
  transform:translate3d(0,4px,0) scale(.96);
}
@keyframes toast-pop{
  from{opacity:0;transform:translate3d(0,8px,0) scale(.95)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Archived chip in search and card views */
.chip-archived{
  background:rgba(234,179,8,.18)!important;
  color:#facc15!important;
  border:1px solid rgba(234,179,8,.35);
  font-weight:700;
}

/* Drag & Drop Visual Highlight */
.editor-card.drag-over{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 2px var(--accent),0 36px 90px rgba(0,0,0,.9)!important;
}

@keyframes viewEnter {
  from {
    opacity: 0.7;
    transform: translate3d(0, 4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.notes-grid {
  animation: viewEnter 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modalBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes editorCardPopIn {
  from {
    opacity: 0;
    transform: scale(0.96) translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@keyframes drawerSlideIn {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.modal:not(.hidden) .modal-backdrop,
.settings-backdrop:not(.hidden),
.trash-modal-backdrop:not(.hidden) {
  animation: modalBackdropFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal:not(.hidden) .editor-card {
  animation: editorCardPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

.settings-drawer:not(.hidden) {
  animation: drawerSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform;
}

.trash-modal:not(.hidden) .trash-modal-dialog {
  animation: editorCardPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* Micro-interactions: Cards, Buttons, and Nav */
.note {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease !important;
}
.note:hover {
  transform: translate3d(0, -3px, 0) !important;
}

.quick-new {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.quick-new:hover {
  transform: translate3d(0, -1px, 0) !important;
}
.quick-new:active {
  transform: scale(0.99) !important;
}

.fab {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
}
.fab:hover {
  transform: translate3d(0, -2px, 0) scale(1.03) !important;
}
.fab:active {
  transform: scale(0.96) !important;
}

.primary-nav .nav {
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
}
.primary-nav .nav:active {
  transform: scale(0.95);
}

.save-note-btn {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, background 0.18s ease !important;
}
.save-note-btn:hover {
  transform: translate3d(0, -1px, 0);
}
.save-note-btn:active {
  transform: scale(0.97);
}

.setting-action, .trash-act-btn, .trash-head-btn {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease !important;
}
.setting-action:active, .trash-act-btn:active, .trash-head-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   WCAG 2.0+ UNIVERSAL ACCESSIBILITY, FOCUS RINGS & TOUCH REFINEMENT
   ========================================================================== */
/* Elimina o highlight padrão retangular e o flash azul de navegadores móveis/touch */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove contorno e artefatos retangulares ao clicar ou tocar com mouse/touch */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.nav:focus:not(:focus-visible),
.back-home:focus:not(:focus-visible),
.icon-button:focus:not(:focus-visible),
.settings-top-btn:focus:not(:focus-visible),
.search-top-btn:focus:not(:focus-visible),
.search-close-btn:focus:not(:focus-visible),
.close-settings-btn:focus:not(:focus-visible),
.close-trash-modal-btn:focus:not(:focus-visible),
.view-toggle-btn:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none;
}

/* Foco acessível via teclado que respeita milimetricamente o border-radius de cada componente */
button:focus-visible,
[role="button"]:focus-visible,
.icon-button:focus-visible,
.back-home:focus-visible,
.search-top-btn:focus-visible,
.settings-top-btn:focus-visible,
.search-close-btn:focus-visible,
.close-settings-btn:focus-visible,
.close-trash-modal-btn:focus-visible,
.primary-nav .nav:focus-visible,
.view-toggle-btn:focus-visible,
.save-note-btn:focus-visible,
.fab:focus-visible,
.setting-action:focus-visible,
.accent-swatch:focus-visible,
.trash-act-btn:focus-visible,
.trash-head-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--accent-hover, var(--accent)) !important;
}

/* Inputs e áreas de texto com cantos convencionais */
input:focus-visible:not(.note-title):not(#searchInput):not(.check-row input):not(#checklist input),
textarea:focus-visible:not(#noteBody),
select:focus-visible {
  outline: 2px solid var(--accent-hover, var(--accent)) !important;
  outline-offset: 1px !important;
}

.note-title:focus,
.note-title:focus-visible,
.editor-body textarea:focus,
.editor-body textarea:focus-visible,
.check-row input[type="text"]:focus,
.check-row input[type="text"]:focus-visible,
#checklist input[type="text"]:focus,
#checklist input[type="text"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FEEDBACKS DE TOQUE E CLIQUE UNIFORMES E ISOLADOS AO BOTÃO PRESSIONADO
   ========================================================================== */
/* Estabilidade estrita da barra de navegação (sem piscar nem alterar container) */
.primary-nav {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
}
.primary-nav .nav {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 16px !important;
}
.primary-nav .nav:active {
  transform: scale(0.95) !important;
}

/* Botão Voltar (respeita border-radius de 12px) */
.back-home {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  border-radius: 12px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.back-home:active {
  transform: scale(0.94) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Botões de Fechar (respeitam seus border-radius de 8px a 12px) */
.icon-button,
.close-settings-btn,
.close-trash-modal-btn,
.search-close-btn {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.icon-button:active,
.close-settings-btn:active,
.close-trash-modal-btn:active,
.search-close-btn:active {
  transform: scale(0.93) !important;
}

/* Botões de Configurações e Busca no Topo (respeitam border-radius de 13px) */
.search-top-btn,
.settings-top-btn {
  -webkit-tap-highlight-color: transparent !important;
}
.search-top-btn:active,
.settings-top-btn:active {
  transform: scale(0.96) !important;
}

/* Alternador Cards | Lista */
.view-toggle-btn {
  -webkit-tap-highlight-color: transparent !important;
}
.view-toggle-btn:active {
  transform: scale(0.95) !important;
}

/* Minimum accessible touch targets */
button, input[type="button"], input[type="submit"], .image-button {
  min-height: 38px;
}
@media (max-width: 800px) {
  .primary-nav .nav, .fab, .quick-new, .icon-button, .close-settings-btn, .close-trash-modal-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .splash-screen {
    display: none !important;
  }
}

/* ==========================================================================
   Multi-select & Batch Actions Bar (Seleção em Lote)
   ========================================================================== */

.note {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}

.note:focus-visible {
  outline: 3px solid #11a8f4;
  outline-offset: 2px;
}

/* Adjust pin position to the top-right corner without overlapping the title */
.note .pin {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--accent) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Selection check button on each note */
.note-select-check {
  position: absolute;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(18, 22, 28, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  z-index: 6;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}

.note:hover .note-select-check,
.note:focus-visible .note-select-check,
.note-select-check:focus-visible,
body.has-selection .note .note-select-check {
  opacity: 0.9;
  transform: scale(1);
}

.note-select-check:hover {
  opacity: 1 !important;
  transform: scale(1.08) !important;
  border-color: var(--accent) !important;
}

.note-select-check .check-mark {
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  display: none;
  text-align: center;
  margin: 0;
  padding: 0;
  transform: translateY(-0.5px);
}

/* Selected Note state */
.note.selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent), 0 16px 36px var(--accent-glow) !important;
  background: linear-gradient(145deg, var(--accent-soft) 0%, rgba(14, 18, 24, 0.98) 100%) !important;
}

.note.selected .note-select-check {
  opacity: 1 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: scale(1) !important;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.note.selected .note-select-check .check-mark {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Tactile press cue */
.note.pressing {
  transform: scale(0.975) !important;
  border-color: rgba(17, 168, 244, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(17, 168, 244, 0.4) !important;
  transition: transform 0.1s ease !important;
}

/* Hide primary nav and fab when selection is active */
body.has-selection .primary-nav,
body.has-selection .fab {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 20px, 0) scale(0.95) !important;
}

/* Floating Batch Action Toolbar */
.batch-bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: 85;
  width: min(520px, calc(100% - 24px));
  transform: translate3d(-50%, 0, 0);
  background: rgba(16, 20, 26, 0.95);
  border: 1px solid rgba(17, 168, 244, 0.35);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(17, 168, 244, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 10px 12px 11px;
  animation: batchBarSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes batchBarSlideUp {
  from {
    opacity: 0;
    transform: translate3d(-50%, 20px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

.batch-bar-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.batch-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 2px;
}

.batch-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-glow);
}

.batch-counter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
}

.batch-count-text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.batch-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.batch-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #ff7a85;
}

.batch-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.batch-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.batch-action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
  transform: translateY(-1px);
}

.batch-action-btn.danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.batch-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ffffff;
}

.batch-action-icon {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -2px;
}

@media (max-width: 480px) {
  .batch-bar {
    width: calc(100% - 16px);
    padding: 8px 10px 9px;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
  .batch-actions-grid {
    gap: 6px;
  }
  .batch-action-btn {
    padding: 6px 8px;
    font-size: 12px;
    height: 38px;
    gap: 5px;
  }
  .batch-action-btn .ui-icon {
    width: 15px;
    height: 15px;
  }
}

/* ==========================================================================
   PACK 2: CONTROLE DE VISUALIZAÇÃO E LISTA COMPACTA
   ========================================================================== */
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 16px;
}

.section-title-wrap {
  flex: 1;
  min-width: 0;
}

.section-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

#countText {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 2px;
  flex-shrink: 0;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

.view-toggle-btn svg {
  flex-shrink: 0;
}

.view-toggle-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 650;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Modo Cards: Padronização Visual e Altura Uniforme de Cards
   ========================================================================== */

/* Esconde itens exclusivos do modo lista */
.notes-grid:not(.list) .list-meta-badges,
.notes-grid:not(.list) .list-date,
.notes-grid:not(.list) .list-only-preview {
  display: none !important;
}

.notes-grid:not(.list) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 14px !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Dimensões uniformes e rigorosas para todos os cards */
.notes-grid:not(.list) .note {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  padding: 14px 44px 12px 124px !important;
  margin-bottom: 0 !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  position: relative !important;
  contain-intrinsic-size: auto 140px !important;
}

/* Miniatura à esquerda perfeitamente alinhada e dimensionada */
.notes-grid:not(.list) .note::before {
  top: 22px !important;
  left: 14px !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* Indicador de fixado posicionado na extremidade superior direita com margem segura */
.notes-grid:not(.list) .note .pin {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  color: var(--accent) !important;
}

/* Indicador discreto de seleção fixado no canto inferior direito do card */
.notes-grid:not(.list) .note-select-check {
  right: 14px !important;
  bottom: 12px !important;
  left: auto !important;
  top: auto !important;
  z-index: 6 !important;
}

/* Linha do cabeçalho e título da nota */
.notes-grid:not(.list) .note .note-header-line {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.notes-grid:not(.list) .note h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  color: var(--text) !important;
}

/* Prévia de texto delimitada sem alterar o conteúdo real */
.notes-grid:not(.list) .note-body-paragraph {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  margin: 5px 0 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-height: 38px !important;
}

/* Prévia de checklist compactada e alinhada */
.notes-grid:not(.list) .checks {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin: 5px 0 0 0 !important;
  max-height: 38px !important;
  overflow: hidden !important;
}

.notes-grid:not(.list) .check-preview {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.notes-grid:not(.list) .check-preview .box {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  border: 1.5px solid !important;
  border-radius: 3.5px !important;
}

.notes-grid:not(.list) .check-preview .check-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/* Etiquetas (chips) em linha única contínua sem quebras de linha */
.notes-grid:not(.list) .chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 4px 0 0 0 !important;
  max-height: 22px !important;
  overflow: hidden !important;
  width: 100% !important;
}

.notes-grid:not(.list) .chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Rodapé com data ancorado fixamente na base do card com margem de segurança para o indicador */
.notes-grid:not(.list) .note-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 2px !important;
  padding-right: 24px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Responsividade de Cards: Telas médias e Tablets (<= 680px) */
@media (max-width: 680px) {
  .notes-grid:not(.list) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
  }

  .notes-grid:not(.list) .note {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    padding: 12px 40px 10px 106px !important;
    border-radius: 18px !important;
    contain-intrinsic-size: auto 130px !important;
  }

  .notes-grid:not(.list) .note::before {
    top: 22px !important;
    left: 12px !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px !important;
    background-size: 44px !important;
  }

  .notes-grid:not(.list) .note h2 {
    font-size: 15.5px !important;
  }

  .notes-grid:not(.list) .note-body-paragraph {
    font-size: 12.5px !important;
    max-height: 35px !important;
  }

  .notes-grid:not(.list) .note .pin {
    right: 12px !important;
    top: 12px !important;
  }

  .notes-grid:not(.list) .note-select-check {
    right: 12px !important;
    bottom: 10px !important;
    left: auto !important;
    top: auto !important;
  }
}

/* Responsividade de Cards: Celulares menores (<= 420px) */
@media (max-width: 420px) {
  .notes-grid:not(.list) .note {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    padding: 11px 36px 9px 96px !important;
    border-radius: 16px !important;
    contain-intrinsic-size: auto 124px !important;
  }

  .notes-grid:not(.list) .note::before {
    top: 22px !important;
    left: 10px !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 13px !important;
    background-size: 40px !important;
  }

  .notes-grid:not(.list) .note h2 {
    font-size: 14.5px !important;
  }

  .notes-grid:not(.list) .note-body-paragraph {
    font-size: 12px !important;
    max-height: 33px !important;
  }

  .notes-grid:not(.list) .note .pin {
    right: 10px !important;
    top: 10px !important;
  }

  .notes-grid:not(.list) .note-select-check {
    right: 10px !important;
    bottom: 9px !important;
    left: auto !important;
    top: auto !important;
  }

  .notes-grid:not(.list) .chips {
    display: none !important;
  }
}

/* Modo Lista Compacta */
.notes-grid.list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  columns: 1 !important;
  max-width: 760px;
  margin: 0 auto;
}

.notes-grid.list .note {
  min-height: 0 !important;
  height: auto !important;
  padding: 9px 40px 9px 14px !important;
  margin-bottom: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 3px 10px rgba(0, 0, 0, 0.28) !important;
  content-visibility: auto !important;
  contain-intrinsic-size: auto 38px !important;
}

.notes-grid.list .note::before {
  display: none !important;
}

.notes-grid.list .note .pin {
  display: none !important;
}

.notes-grid.list .note .checks,
.notes-grid.list .note .chips,
.notes-grid.list .note .note-foot {
  display: none !important;
}

.notes-grid.list .note .note-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.notes-grid.list .note h2 {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  color: var(--text) !important;
}

.notes-grid.list .list-meta-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.notes-grid.list .list-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.notes-grid.list .list-badge.badge-pin {
  color: #fbbf24;
}

.notes-grid.list .list-badge.badge-check {
  color: #38bdf8;
}

.notes-grid.list .list-badge.badge-img {
  color: #a78bfa;
}

.notes-grid.list .list-badge.badge-archive {
  color: #94a3b8;
}

.notes-grid.list .list-date {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.85;
}

.notes-grid.list .note-body-paragraph,
.notes-grid.list .list-only-preview {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  -webkit-line-clamp: 1 !important;
}

.notes-grid.list .note-select-check {
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.notes-grid.list .note:hover .note-select-check,
.notes-grid.list .note:focus-visible .note-select-check,
.notes-grid.list .note-select-check:focus-visible,
body.has-selection .notes-grid.list .note .note-select-check {
  opacity: 0.9 !important;
  transform: translateY(-50%) !important;
}

.notes-grid.list .note.selected .note-select-check {
  opacity: 1 !important;
  transform: translateY(-50%) !important;
}

/* ==========================================================================
   Editor em Tela Inteira & Barra Inferior de Ferramentas
   ========================================================================== */

#editor.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  z-index: 60 !important;
  background: #000000 !important;
}

#editor.modal.hidden {
  display: none !important;
}

#editorCard.editor-card {
  position: relative !important;
  width: 100vw !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: #000000 !important;
  transition: min-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
}

.editor-head {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px clamp(14px, 3.5vw, 40px) !important;
  border: none !important;
  border-bottom: none !important;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.85) 65%, rgba(0, 0, 0, 0) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 10 !important;
}

.editor-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 24px clamp(16px, 4vw, 44px) 16px !important;
  box-sizing: border-box !important;
  transition: padding 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.note-title {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 18px !important;
  flex-shrink: 0 !important;
}

.note-title::placeholder {
  color: var(--muted) !important;
  opacity: 0.65 !important;
}

.editor-body textarea#noteBody {
  flex: 1 1 auto !important;
  min-height: calc(100dvh - 240px) !important;
  height: 100% !important;
  width: 100% !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 16.5px !important;
  line-height: 1.62 !important;
  transition: min-height 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.editor-body textarea#noteBody::placeholder {
  color: var(--muted) !important;
  opacity: 0.6 !important;
}

/* Transição de expansão máxima quando focado */
.editor-card:focus-within,
.editor-card.editor-fullscreen {
  height: 100dvh !important;
  max-height: none !important;
}

.editor-card:focus-within .editor-body textarea#noteBody,
.editor-card.editor-fullscreen .editor-body textarea#noteBody {
  min-height: calc(100dvh - 220px) !important;
}

/* Checklist em tela cheia */
.checklist {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.add-item {
  align-self: flex-start !important;
  margin-top: 4px !important;
}

/* Checklist item inputs — foco limpo com apenas o cursor de texto piscando */
.check-row input[type="text"] {
  min-width: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 8px 4px !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
}

.check-row input[type="text"]:focus,
.check-row input[type="text"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* Imagem Preview no corpo */
.image-preview {
  position: relative !important;
  margin-bottom: 18px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  max-height: 380px !important;
  flex-shrink: 0 !important;
}

.image-preview img {
  width: 100% !important;
  max-height: 380px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 14px !important;
}

/* Barra Inferior de Ferramentas (.editor-foot) */
.editor-foot {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px clamp(14px, 3.5vw, 40px) max(12px, env(safe-area-inset-bottom, 12px)) !important;
  border: none !important;
  border-top: none !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 28%, #000000 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.editor-foot-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

.editor-foot-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.editor-foot-metrics {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.editor-image-status {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.editor-char-count {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--muted) !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.editor-foot-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

.editor-foot-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.editor-foot .type-tabs {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05) !important;
}

.editor-foot .type-tabs button,
.editor-foot .type-tabs .type-tab-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  line-height: 1 !important;
  position: relative !important;
}

.editor-foot .type-tabs button {
  padding: 0 12px !important;
}

.editor-foot .type-tabs .type-tab-action {
  padding: 0 10px !important;
  min-width: 34px !important;
}

.editor-foot .type-tabs button:hover,
.editor-foot .type-tabs .type-tab-action:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--text) !important;
}

.editor-foot .type-tabs button:active,
.editor-foot .type-tabs .type-tab-action:active {
  transform: scale(0.96) !important;
}

.editor-foot .type-tabs button.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.18) !important;
}

.editor-foot .type-tabs-divider {
  display: block !important;
  width: 1px !important;
  height: 16px !important;
  margin: 0 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

.editor-foot .type-tab-action .camera-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.editor-foot .type-tab-action input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.editor-foot-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.editor-foot-right #editedText {
  font-size: 11px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
}

/* Responsividade Mobile para o Editor */
@media (max-width: 600px) {
  .editor-head {
    padding: 10px 14px !important;
  }
  .editor-body {
    padding: 18px 14px 12px !important;
  }
  .note-title {
    font-size: 22px !important;
    margin-bottom: 14px !important;
  }
  .editor-body textarea#noteBody {
    font-size: 15.5px !important;
  }
  .editor-foot {
    padding: 8px 12px max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }
  .editor-foot-bar {
    gap: 8px !important;
  }
  .editor-foot-left {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .editor-foot-metrics {
    gap: 5px !important;
  }
  .editor-image-status {
    display: none !important;
  }
  .editor-char-count {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
  .editor-foot .type-tabs {
    padding: 2px !important;
    border-radius: 10px !important;
  }
  .editor-foot .type-tabs button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .editor-foot .type-tabs .type-tab-action {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    min-width: 32px !important;
  }
  .editor-foot .type-tab-action .camera-icon {
    width: 15px !important;
    height: 15px !important;
  }
  .editor-foot .type-tabs-divider {
    height: 14px !important;
    margin: 0 1px !important;
  }
  .editor-foot-right #editedText {
    display: none !important;
  }
}

/* ==========================================================================
   Ocultação Visual da Barra de Rolagem Padrão do Navegador
   Mantém 100% funcional a rolagem via mouse, roda, touchpad e toque/gestos
   Compatível com Chromium (Chrome, Edge, Samsung Internet), Firefox e Safari
   ========================================================================== */

/* Firefox 64+ e Chromium 121+ / navegadores modernos */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important; /* IE e Edge legado */
}

/* Motores WebKit / Blink (Chrome, Safari, Edge, Opera, Samsung Internet) */
::-webkit-scrollbar,
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

/* ==========================================================================
   Sistema de Hashtags e Filtro Ativo
   ========================================================================== */

/* Barra discreta de filtro ativo por hashtag no topo */
.active-tag-filter-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  margin: 0 0 16px 0;
  border-radius: 12px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  animation: filterBarSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.active-tag-filter-bar.hidden {
  display: none !important;
}

@keyframes filterBarSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.active-tag-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.active-tag-hash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.active-tag-prefix {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.active-tag-badge {
  display: inline-flex;
  align-items: center;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-tag-name {
  color: var(--accent);
  font-weight: 700;
  font-size: 13.5px;
}

.clear-tag-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.16s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.clear-tag-filter-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-glow);
  color: var(--accent);
  transform: translateY(-1px);
}

.clear-tag-filter-btn:active {
  transform: scale(0.96);
}

.clear-tag-icon {
  font-size: 11px;
  font-weight: 700;
}

/* Chips clicáveis de hashtags nos cards */
button.chip.tag-chip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--accent-glow) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  transition: background 0.16s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button.chip.tag-chip:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-hover) !important;
  transform: translateY(-1px);
}

button.chip.tag-chip:active {
  transform: scale(0.94);
}

button.chip.tag-chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px var(--accent-glow);
  font-weight: 700 !important;
}

/* Badge de hashtag clicável na visualização em lista */
button.list-badge.badge-label.tag-chip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--accent-glow) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
  font-size: 11px !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button.list-badge.badge-label.tag-chip:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-hover) !important;
  transform: translateY(-1px);
}

button.list-badge.badge-label.tag-chip:active {
  transform: scale(0.95);
}

button.list-badge.badge-label.tag-chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px var(--accent-glow);
  font-weight: 700 !important;
}

/* ==========================================================================
   EDITOR HEADER PIN & ARCHIVE TWO-STATE TOGGLE BUTTONS
   ========================================================================== */
.editor-head .icon-button {
  transition: background 0.16s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid transparent !important;
  position: relative;
}

.editor-head .icon-button.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-glow) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

.editor-head .icon-button.active:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

/* ==========================================================================
   AJUSTE DE ÁREA DE ESCRITA DO EDITOR (mais espaço para escrever)
   Bloco aditivo no fim do arquivo: amplia a largura útil, faz o textarea
   ocupar toda a altura livre e reduz o respiro vertical. Não altera outras
   áreas do app. Mantém a mesma min-height em foco/fullscreen (sem "pulo").
   ========================================================================== */

.editor-body {
  max-width: min(1200px, 100%) !important;
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}

.editor-foot-bar {
  max-width: min(1200px, 100%) !important;
}

.note-title {
  margin-bottom: 8px !important;
}

.editor-body textarea#noteBody {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: calc(100dvh - 220px) !important;
}

.editor-card:focus-within .editor-body textarea#noteBody,
.editor-card.editor-fullscreen .editor-body textarea#noteBody {
  min-height: calc(100dvh - 220px) !important;
}

@media (max-width: 600px) {
  .editor-body {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }
}