@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --canvas:#FBFBFA;
  --surface:#FFFFFF;
  --surface-raised:#F9F9F8;
  --border:#EAEAEA;
  --border-strong:#D4D4D4;
  --text:#111111;
  --text-secondary:#787774;
  --text-tertiary:#A8A7A4;
  --accent:#111111;
  --accent-hover:#333333;
  --danger:#C25450;
  --danger-bg:#FDEBEC;
  --success:#5A9A5E;
  --success-bg:#EDF3EC;
  --warning:#C4940A;
  --warning-bg:#FBF3DB;
  --info:#4A9AD4;
  --info-bg:#E1F3FE;
  --particle-color:#cf3e30;
  --radius:8px;
  --radius-sm:6px;
  --radius-xs:4px;
  --font-body:'Inter',-apple-system,'Helvetica Neue',sans-serif;
  --font-editorial:'Newsreader','Playfair Display',Georgia,serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
}

[data-theme="dark"]{
  --canvas:#0c0c0e;
  --surface:#131316;
  --surface-raised:#1a1a1e;
  --border:#25252a;
  --border-strong:#35353c;
  --text:#e8e8ec;
  --text-secondary:#8a8a94;
  --text-tertiary:#5c5c66;
  --accent:#e8e8ec;
  --accent-hover:#c8c8cc;
  --danger:#f87171;
  --danger-bg:rgba(248,113,113,0.12);
  --success:#34d399;
  --success-bg:rgba(52,211,153,0.12);
  --warning:#fbbf24;
  --warning-bg:rgba(251,191,36,0.12);
  --info:#60a5fa;
  --info-bg:rgba(96,165,250,0.12);
  --particle-color:#f59e0b;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
body{
  font-family:var(--font-body);font-weight:400;background:var(--canvas);
  color:var(--text);min-height:100vh;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.dialog-open{overflow:hidden;height:100vh}

/* Skip to content */
.skip-link{
  position:absolute;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--canvas);padding:0.5rem 1rem;border-radius:var(--radius-xs);
  font-weight:600;font-size:0.85rem;z-index:10000;text-decoration:none;
  transition:top 0.2s;
}
.skip-link:focus{top:0.5rem}

#app{max-width:1100px;margin:0 auto;padding:4rem 3rem 5rem;position:relative;z-index:1}

/* ========== HEADER ========== */
header{text-align:center;margin-bottom:4rem;position:relative}

h1{
  font-family:var(--font-editorial);font-size:3rem;font-weight:400;
  letter-spacing:-0.03em;line-height:1.1;font-style:normal;
  color:var(--text);
}
.subtitle{
  color:var(--text-secondary);margin-top:0.75rem;font-size:1rem;font-weight:400;
  max-width:420px;margin-left:auto;margin-right:auto;line-height:1.55;
}
.daily-quote{
  margin-top:1.5rem;font-family:var(--font-editorial);font-style:italic;
  font-size:0.85rem;color:var(--text-tertiary);line-height:1.6;
  max-width:480px;margin-left:auto;margin-right:auto;
  opacity:0;transition:opacity 0.8s ease;
}
.daily-quote.visible{opacity:1}
.daily-quote .quote-char{
  font-style:normal;font-weight:500;color:var(--text-secondary);font-family:var(--font-body);
  font-size:0.75rem;letter-spacing:0.02em;
}

.status{
  display:inline-flex;align-items:center;gap:0.4rem;margin-top:1.25rem;
  font-size:0.72rem;font-weight:500;color:var(--text-tertiary);
  letter-spacing:0.03em;text-transform:uppercase;
}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);transition:all 0.3s}
.status.connected .status-dot{background:var(--success)}

.github-link{
  position:absolute;top:0;right:0;display:inline-flex;align-items:center;
  color:var(--text-tertiary);background:transparent;border-radius:var(--radius-xs);
  padding:6px;transition:color 0.2s;text-decoration:none;
}
.github-link svg{width:18px;height:18px;display:block;transition:color 0.2s}
.github-link:hover{color:var(--text)}
.github-link:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.theme-toggle{
  position:absolute;top:0;right:40px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-tertiary);background:transparent;border:none;border-radius:var(--radius-xs);
  padding:6px;cursor:pointer;transition:color 0.2s;
}
.theme-toggle svg{width:16px;height:16px;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.theme-toggle:hover{color:var(--text)}
.theme-toggle:hover svg{transform:rotate(15deg) scale(1.1)}
.theme-toggle:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* Hide/show sun/moon based on theme */
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}
[data-theme="light"] .icon-moon{display:block}
:root:not([data-theme]) .icon-sun{display:none}
:root:not([data-theme]) .icon-moon{display:block}

/* ========== INPUT SECTION ========== */
.input-section{display:flex;flex-direction:column;gap:0.75rem;margin-bottom:3rem}

textarea{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:0.875rem 1rem;
  color:var(--text);font-family:var(--font-mono);font-size:0.85rem;
  resize:vertical;min-height:100px;transition:border-color 0.2s;
  line-height:1.6;
}
textarea::placeholder{color:var(--text-tertiary)}
textarea:focus{border-color:var(--text-secondary);outline:none}

.text-input-wrapper{position:relative}

.btn{
  padding:0.625rem 1.25rem;border-radius:var(--radius-xs);border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.85rem;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);display:inline-flex;align-items:center;gap:0.4rem;
  letter-spacing:0.01em;position:relative;overflow:hidden;
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--accent);color:var(--canvas)}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s;
}
.btn-primary:hover::after{left:100%}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(17,17,17,0.12)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn-primary:disabled::after{display:none}

.file-upload-label{
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  padding:1.5rem;border-radius:var(--radius);
  cursor:pointer;color:var(--text-secondary);transition:all 0.3s;
  font-size:0.85rem;font-weight:400;position:relative;
  background:var(--surface);
}
.file-upload-label::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);  padding:2.5px;
  background:conic-gradient(from var(--border-angle,0deg),var(--info),var(--success),var(--warning),var(--danger),var(--info));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;transition:opacity 0.4s;
  animation:borderSpin 3s linear infinite;
  pointer-events:none;
}
@property --border-angle{
  syntax:'<angle>';initial-value:0deg;inherits:false;
}
@keyframes borderSpin{from{--border-angle:0deg}to{--border-angle:360deg}}
.file-upload-label:hover::before{opacity:1}
.file-upload-label:hover{
  color:var(--text);transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.file-upload-label:active{transform:translateY(0) scale(0.99)}
.file-upload-label:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.upload-icon{font-size:1.25rem;line-height:1;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.file-upload-label:hover .upload-icon{transform:translateY(-3px) scale(1.1)}

/* ========== PROGRESS ========== */
.upload-progress{margin-bottom:1.5rem}
.progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;position:relative}
.progress-fill{
  height:100%;border-radius:2px;transition:width 0.4s cubic-bezier(0.65,0,0.35,1);width:0%;
  background:linear-gradient(90deg,var(--info),var(--success),var(--warning),var(--info));
  background-size:300% 100%;
  animation:progressShimmer 2s linear infinite;
}
@keyframes progressShimmer{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* ========== ITEMS SECTION ========== */
.items-section{margin-top:0.5rem}
.items-section h2{
  font-family:var(--font-body);font-size:0.7rem;font-weight:600;
  margin-bottom:1rem;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:0.08em;
}
.item-count{font-weight:400;color:var(--text-tertiary);font-size:0.7rem}

.items-grid{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:0.75rem;
}
.items-grid>.item-card{
  display:block;width:100%;
}
body.dialog-open .item-card{
  z-index:0!important;pointer-events:none;
  transform:none!important;box-shadow:none!important;
}

/* ========== ITEM CARDS ========== */
.item-card{
  display:block;width:100%;background:var(--surface);
  border:1px solid var(--border);border-left:5px solid var(--border-strong);
  border-radius:var(--radius);padding:1rem;position:relative;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.items-grid.initial-load .item-card{
  transition:none!important;opacity:0;transform:translateY(24px);
}

.item-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.item-card.file{
  border-left:5px solid var(--info);
}
.item-card.file:hover{
  border-color:var(--info);
  border-left-color:var(--info);
  box-shadow:0 4px 24px rgba(31,108,159,0.1),0 0 0 1px rgba(31,108,159,0.06);
}
.item-card.text{
  border-left:5px solid var(--success);
}
.item-card.text:hover{
  border-color:var(--success);
  border-left-color:var(--success);
  box-shadow:0 4px 24px rgba(52,101,56,0.1),0 0 0 1px rgba(52,101,56,0.06);
}

@keyframes bounceIn{
  0%{opacity:0;transform:translateY(24px) scale(0.92)}
  60%{opacity:1;transform:translateY(-4px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes cardVanish{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(0.85) translateY(20px);filter:blur(8px)}
}

.item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.625rem}
.item-type{
  font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;
  display:inline-flex;align-items:center;gap:0.3rem;
}
.item-type svg{width:12px;height:12px}
.item-type.file{color:var(--info)}
.item-type.text{color:var(--success)}

.item-actions{display:flex;gap:0.15rem;flex-wrap:wrap;justify-content:flex-end}

.btn-icon{
  background:transparent;border:none;color:var(--text-tertiary);cursor:pointer;
  padding:4px;border-radius:var(--radius-xs);transition:all 0.15s;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-icon:hover{color:var(--text);background:var(--surface-raised)}
.btn-icon:active{transform:scale(0.9)}
.btn-icon.delete:hover{color:var(--danger);background:var(--danger-bg);animation:deleteWiggle 0.4s ease}
@keyframes deleteWiggle{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-8deg)}
  40%{transform:rotate(8deg)}
  60%{transform:rotate(-4deg)}
  80%{transform:rotate(4deg)}
}
.btn-icon:focus-visible{outline:2px solid var(--text);outline-offset:1px}

/* SVG icon animations */
.icon-lucide{width:14px;height:14px;display:inline-block;transition:all 0.2s}
.btn-icon:hover .icon-copy{transform:scale(1.12) rotate(-6deg)}
.btn-icon:active .icon-copy{transform:scale(0.88) rotate(4deg)}
.icon-eye .eyelid{transform-box:fill-box;transform-origin:center top;transform:scaleY(0)}
.btn-icon:hover .icon-eye{transform:scale(1.12);filter:drop-shadow(0 0 3px rgba(17,17,17,0.15))}
.btn-icon:hover .icon-eye .eyelid{animation:eyeLook 3s ease-in-out infinite}
@keyframes eyeLook{
  0%,18%{transform:scaleY(0)}
  22%{transform:scaleY(1)}
  26%,40%{transform:scaleY(0)}
  44%{transform:scaleY(1)}
  48%,100%{transform:scaleY(0)}
}

.icon-clock .clock-hand-hour{transform-origin:12px 12px}
.icon-clock .clock-hand-minute{transform-origin:12px 12px}
.extend-btn:hover .icon-clock .clock-hand-hour{animation:hourSpin 6s linear infinite}
.extend-btn:hover .icon-clock .clock-hand-minute{animation:minuteSpin 2s linear infinite}
@keyframes hourSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes minuteSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.extend-btn:hover .icon-clock{animation:clockGlow 1s ease-in-out infinite}
@keyframes clockGlow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0px rgba(17,17,17,0.1))}50%{transform:scale(1.1);filter:drop-shadow(0 0 5px rgba(17,17,17,0.15))}}

.url-btn:hover .icon-link{transform:scale(1.15)}
.youtube-btn:hover .icon-play{transform:scale(1.15)}

.btn-icon .icon-copy.copied{stroke:var(--success)}
.btn-icon .icon-copy.copied{animation:copyPop 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes copyPop{
  0%{transform:scale(0.4) rotate(-45deg);opacity:0}
  50%{transform:scale(1.2) rotate(8deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}

.file-name{font-weight:600;word-break:break-all;margin-bottom:0.15rem;font-size:0.9rem}
.file-size{font-size:0.75rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}

.btn-download{
  display:inline-flex;align-items:center;gap:0.35rem;margin-top:0.75rem;
  padding:0.4rem 0.85rem;background:var(--text);color:var(--canvas);border:none;
  border-radius:var(--radius-xs);cursor:pointer;font-size:0.78rem;font-weight:500;
  font-family:var(--font-body);transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;overflow:hidden;
}
.btn-download::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s;
}
.btn-download:hover::after{left:100%}
.btn-download:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(17,17,17,0.12)}
.btn-download:active{transform:scale(0.96)}
.btn-download:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.btn-download svg{width:13px;height:13px}

.text-content{
  font-family:var(--font-mono);font-size:0.78rem;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;max-height:160px;overflow-y:auto;
  background:var(--surface-raised);padding:0.75rem;border-radius:var(--radius-sm);
  margin-top:0.5rem;color:var(--text-secondary);
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}

.item-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:0.75rem;padding-top:0.5rem;border-top:1px solid var(--border);
}
.item-time{font-size:0.68rem;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.expires-soon{color:var(--danger);animation:expiresPulse 1.5s ease-in-out infinite}
@keyframes expiresPulse{0%,100%{opacity:1}50%{opacity:0.5}}

/* ========== DRAG OVERLAY ========== */
.drag-overlay{
  position:fixed;inset:0;background:rgba(251,251,250,0.92);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  z-index:1000;border:1.5px dashed var(--text-tertiary);transition:opacity 0.2s;
}
.drag-overlay.hidden{display:none;opacity:0;pointer-events:none}
.drag-overlay-content{text-align:center}
.drag-icon{
  display:block;margin-bottom:0.75rem;
  animation:dragBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) infinite alternate;
}
@keyframes dragBounce{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-8px) scale(1.05)}
}
.drag-overlay-content p{font-size:1.1rem;font-weight:500;color:var(--text);letter-spacing:-0.01em}

/* ========== EMPTY STATE ========== */
.empty-state{text-align:center;padding:4rem 1rem;color:var(--text-tertiary)}
.empty-state svg{
  width:40px;height:40px;margin-bottom:1rem;opacity:0.25;
  animation:float 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.empty-state p{font-size:0.9rem;font-weight:500;color:var(--text-secondary)}
.empty-state .hint{font-size:0.8rem;margin-top:0.35rem;color:var(--text-tertiary);font-weight:400}
.empty-state.hidden{display:none}

.hidden{display:none!important}

/* ========== MODAL ========== */
.text-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000}
.text-modal.hidden{display:none}
.text-modal-backdrop{position:absolute;inset:0;background:rgba(17,17,17,0.4);backdrop-filter:blur(2px)}
.text-modal-panel{
  position:relative;width:min(900px,calc(100% - 48px));height:min(82vh,760px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem;box-shadow:0 8px 32px rgba(0,0,0,0.08);
  transform:translateY(12px) scale(0.99);opacity:0;
  animation:modalIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
  display:flex;flex-direction:column;
}
.text-modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.5rem}
.text-modal-header h3{font-family:var(--font-editorial);font-size:1.1rem;font-weight:400;letter-spacing:-0.01em}
.text-modal-body{flex:1;display:flex;flex-direction:column;min-height:0}
.text-modal-body textarea{
  width:100%;padding:0.875rem;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--canvas);color:var(--text);resize:vertical;
  font-family:var(--font-mono);flex:1;min-height:0;overflow:auto;font-size:0.82rem;
}
.text-modal-body .preview{
  width:100%;padding:0.875rem;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--canvas);color:var(--text);overflow:auto;
  font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word;
  flex:1;min-height:0;font-size:0.82rem;line-height:1.65;
}
.text-modal-actions{display:flex;gap:0.25rem}
.text-modal-footer{margin-top:0.5rem;color:var(--text-tertiary);font-size:0.78rem}

.shortcut-label{margin-left:0.75rem}
.shortcut-label kbd{
  background:var(--surface-raised);border:1px solid var(--border);
  padding:2px 5px;border-radius:var(--radius-xs);margin:0 2px;
  font-weight:500;font-family:var(--font-mono);font-size:0.7rem;
}

@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(0.99)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ========== URL BUTTONS ========== */
.url-btn{
  display:inline-flex;align-items:center;gap:0.2rem;
  background:var(--surface-raised);color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius-xs);padding:0.2rem 0.45rem;
  font-size:0.68rem;font-weight:500;cursor:pointer;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);font-family:var(--font-body);
}
.url-btn:hover{background:var(--info-bg);border-color:var(--info);color:var(--info);transform:scale(1.05)}

.url-actions{display:flex;gap:0.25rem;align-items:center}

.youtube-btn{
  display:inline-flex;align-items:center;gap:0.2rem;
  background:var(--danger-bg);color:var(--danger);border:1px solid transparent;
  border-radius:var(--radius-xs);padding:0.2rem 0.45rem;
  font-size:0.68rem;font-weight:500;cursor:pointer;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);font-family:var(--font-body);
}
.youtube-btn:hover{background:var(--danger);color:#fff;transform:scale(1.05)}

/* YouTube popup */
.youtube-popup{position:fixed;inset:0;background:rgba(17,17,17,0.85);display:flex;align-items:center;justify-content:center;z-index:3000}
.youtube-popup.hidden{display:none}
.youtube-popup-backdrop{position:absolute;inset:0;background:transparent}
.youtube-popup-dialog{
  position:relative;width:560px;height:315px;max-width:90vw;max-height:90vh;
  background:#000;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.youtube-popup-close{
  position:absolute;top:0.5rem;right:0.5rem;background:var(--danger);
  color:#fff;border:none;border-radius:50%;width:1.75rem;height:1.75rem;
  font-size:0.85rem;cursor:pointer;z-index:10;transition:opacity 0.2s;
}
.youtube-popup-close:hover{opacity:0.8}
.youtube-video-container{width:100%;height:100%}
.youtube-video-container iframe{width:100%;height:100%;border:0}

/* ========== EXTEND DIALOG ========== */
.extend-dialog{
  position:absolute;z-index:2500;width:230px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.08);
  padding:0.875rem;animation:modalIn 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.extend-dialog-header{
  font-size:0.72rem;font-weight:600;color:var(--text-secondary);
  text-align:center;margin-bottom:0.625rem;text-transform:uppercase;letter-spacing:0.06em;
}
.extend-picker{display:flex;align-items:center;justify-content:center;gap:0.2rem;position:relative}
.extend-column{display:flex;flex-direction:column;align-items:center;flex:1}
.extend-column-label{font-size:0.6rem;color:var(--text-tertiary);margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.04em;font-weight:500}

.extend-scroll-wrap{position:relative;width:68px;height:136px}
.extend-scroll{
  width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%);
  border-radius:var(--radius-sm);background:var(--surface-raised);cursor:grab;
}
.extend-scroll:active{cursor:grabbing}
.extend-scroll::-webkit-scrollbar{display:none}

.extend-scroll-wrap::before,.extend-scroll-wrap::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:var(--border);z-index:2;pointer-events:none;
}
.extend-scroll-wrap::before{top:50px}
.extend-scroll-wrap::after{bottom:50px}

.extend-scroll-spacer{height:64px;flex-shrink:0}

.extend-option{
  height:34px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:500;color:var(--text-tertiary);
  scroll-snap-align:center;transition:color 0.15s,font-size 0.15s;
  user-select:none;font-variant-numeric:tabular-nums;font-family:var(--font-mono);
}
.extend-option.selected{color:var(--text);font-size:1.2rem;font-weight:600}
.extend-separator{font-size:1.4rem;font-weight:600;color:var(--text-secondary);align-self:center;margin-top:1.5rem;padding:0 0.1rem}

.extend-actions{display:flex;gap:0.4rem;margin-top:0.75rem;justify-content:flex-end}
.extend-cancel{
  background:var(--surface-raised);color:var(--text-secondary);
  font-size:0.75rem;padding:0.35rem 0.75rem;font-family:var(--font-body);font-weight:500;
  border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.extend-cancel:hover{background:var(--border);color:var(--text)}
.extend-confirm{
  font-size:0.75rem;padding:0.35rem 0.75rem;font-family:var(--font-body);font-weight:500;
  background:var(--accent);color:var(--canvas);border:none;border-radius:var(--radius-xs);cursor:pointer;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.extend-confirm:hover{background:var(--accent-hover);transform:translateY(-1px)}
.extend-confirm:disabled{opacity:0.4;cursor:not-allowed;transform:none}

/* ========== BRAND TITLE ========== */
#brand-title{
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:all 0.2s;display:inline-block;font-family:var(--font-editorial);
}
#brand-title:active{transform:scale(0.97)}

body.show-all-active #brand-title{
  color:var(--warning);
  animation:goldenPulse 2s ease-in-out infinite, titleBurn 1.5s ease-in-out infinite;
}
@keyframes goldenPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.15)}
}
@keyframes titleBurn{
  0%,100%{text-shadow:0 0 0 transparent}
  15%{text-shadow:0 0 8px rgba(255,100,0,0.6),0 0 20px rgba(255,50,0,0.3)}
  30%{text-shadow:0 0 4px rgba(255,150,0,0.3)}
  45%{text-shadow:0 0 12px rgba(255,80,0,0.5),0 0 30px rgba(255,30,0,0.2)}
  60%{text-shadow:0 0 3px rgba(255,120,0,0.2)}
  75%{text-shadow:0 0 10px rgba(255,60,0,0.7),0 0 25px rgba(255,0,0,0.3)}
  90%{text-shadow:0 0 2px rgba(255,100,0,0.15)}
}
body.show-all-active .subtitle{
  animation:textBurn 1.8s ease-in-out infinite;
  font-weight:500;
}
@keyframes textBurn{
  0%,100%{text-shadow:0 0 0 transparent;color:var(--warning)}
  20%{text-shadow:0 0 5px rgba(255,100,0,0.5),0 0 12px rgba(255,50,0,0.2);color:#ff6b00}
  40%{text-shadow:0 0 3px rgba(255,150,0,0.3);color:#e68500}
  60%{text-shadow:0 0 8px rgba(255,80,0,0.4),0 0 18px rgba(255,30,0,0.15);color:#ff4400}
  80%{text-shadow:0 0 2px rgba(255,120,0,0.2);color:var(--warning)}
}
body.show-all-active .item-card{
  border-color:var(--warning);
  animation:goldenCardPulse 3s ease-in-out infinite, cardBurn 2.5s ease-in-out infinite;
}
body.show-all-active .item-card:nth-child(odd){animation-delay:0.5s,0.4s}
@keyframes goldenCardPulse{
  0%,100%{box-shadow:0 0 0 rgba(149,100,0,0)}
  50%{box-shadow:0 0 12px rgba(149,100,0,0.12)}
}
@keyframes cardBurn{
  0%,100%{border-color:var(--warning)}
  20%{border-color:#ff6b00}
  40%{border-color:var(--warning)}
  60%{border-color:#ff4400}
  80%{border-color:#e68500}
}
body.show-all-active .item-card .item-type{color:var(--warning)!important}

/* Earthquake */
body.show-all-active #app{
  animation:earthquake 1s ease-out;
  transform-origin:center center;
}
@keyframes earthquake{
  0%,100%{transform:translate(0,0)}
  8%{transform:translate(-8px,4px)}
  16%{transform:translate(6px,-6px)}
  24%{transform:translate(-10px,-3px)}
  32%{transform:translate(7px,5px)}
  40%{transform:translate(-5px,-4px)}
  48%{transform:translate(9px,3px)}
  56%{transform:translate(-4px,6px)}
  64%{transform:translate(6px,-5px)}
  72%{transform:translate(-7px,2px)}
  80%{transform:translate(5px,-3px)}
  88%{transform:translate(-6px,4px)}
  94%{transform:translate(3px,-2px)}
}

body.show-all-active .item-card{
  border-color:var(--warning);
  animation:cardFadeIn 1.5s ease-out, goldenCardPulse 3s ease-in-out infinite, cardBurn 2.5s ease-in-out infinite;
}
body.show-all-active .item-card:nth-child(odd){animation-delay:0s,0.5s,0.4s}
@keyframes cardFadeIn{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
.keypad-overlay{
  position:fixed;inset:0;background:rgba(17,17,17,0.4);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;backdrop-filter:blur(2px);
  animation:fadeIn 0.15s ease-out;
}
.keypad-modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.25rem;width:250px;
  animation:keypadDrop 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes keypadDrop{
  from{opacity:0;transform:translateY(-20px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.keypad-display{
  background:var(--canvas);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:0.625rem 0.75rem;
  font-family:var(--font-mono);font-size:1.4rem;text-align:center;
  letter-spacing:0.5em;min-height:2.75rem;margin-bottom:0.875rem;color:var(--text);
}
.keypad-display.keypad-shake{animation:keypadShake 0.3s ease;border-color:var(--danger)}
@keyframes keypadShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem}
.keypad-key{
  padding:0.625rem;font-size:1.1rem;font-weight:500;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);cursor:pointer;
  transition:all 0.1s;font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent;
}
.keypad-key:hover{background:var(--surface-raised)}
.keypad-key:active{transform:scale(0.95)}
.keypad-key-clear{color:var(--danger)}
.keypad-key-back{font-size:0.9rem}

/* ========== IMMORTAL ========== */
.icon-infinity .infinity-path{
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 0.5s cubic-bezier(0.34,1.56,0.64,1),stroke 0.2s;
}
.immortal-btn:hover .icon-infinity .infinity-path{stroke-dashoffset:0;stroke:var(--warning)}
.immortal-btn.active .icon-infinity .infinity-path{
  stroke-dashoffset:0;stroke:var(--warning);
  animation:infinityDraw 1s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes infinityDraw{0%{stroke-dashoffset:100;stroke:var(--text-tertiary)}50%{stroke-dashoffset:0;stroke:var(--warning)}100%{stroke-dashoffset:0;stroke:var(--warning)}}

.immortal-btn.active{color:var(--warning)!important}

.item-card.text.immortal,
.item-card.file.immortal,
.item-card.immortal{
  border-left:5px solid var(--warning)!important;
}
.item-card.text.immortal:hover,
.item-card.file.immortal:hover,
.item-card.immortal:hover{
  border-left:5px solid var(--warning)!important;
}
.item-card.immortal .item-type{color:var(--warning)!important}
.item-card.immortal-burst{
  position:relative;z-index:1;overflow:visible;
  animation:immortalImpact 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.immortal-flash{
  position:absolute;inset:-15px;border-radius:var(--radius);
  pointer-events:none;z-index:10;
  background:radial-gradient(circle at center, #fff8e1 0%, #ffe082 20%, rgba(196,148,10,0.4) 40%, transparent 60%);
  animation:immortalFlashAnim 0.6s ease-out forwards;
}
@keyframes immortalFlashAnim{
  0%{opacity:0;transform:scale(0.8)}
  15%{opacity:1;transform:scale(1.05)}
  40%{opacity:0.6;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.35)}
}
.immortal-glow{
  position:absolute;inset:0;border-radius:var(--radius);
  pointer-events:none;z-index:3;
  animation:immortalGlowAnim 1.5s ease-out forwards;
}
@keyframes immortalGlowAnim{
  0%{box-shadow:0 0 0 0 rgba(196,148,10,0),0 0 0 0 rgba(255,224,130,0),inset 0 0 0 0 rgba(255,224,130,0)}
  12%{box-shadow:0 0 35px 15px rgba(196,148,10,0.8),0 0 80px 30px rgba(255,224,130,0.5),inset 0 0 40px 12px rgba(255,224,130,0.3)}
  35%{box-shadow:0 0 25px 10px rgba(196,148,10,0.5),0 0 55px 20px rgba(255,224,130,0.3),inset 0 0 25px 6px rgba(255,224,130,0.15)}
  65%{box-shadow:0 0 12px 4px rgba(196,148,10,0.15),0 0 20px 6px rgba(255,224,130,0.08),inset 0 0 8px 2px rgba(255,224,130,0.05)}
  100%{box-shadow:0 0 4px 1px rgba(196,148,10,0.06),0 0 0 0 rgba(255,224,130,0),inset 0 0 0 0 rgba(255,224,130,0)}
}
.immortal-wave-ring{
  position:absolute;inset:-2px;border-radius:var(--radius);
  pointer-events:none;z-index:4;border:2.5px solid;
  animation:immortalWaveAnim 0.9s ease-out forwards;
}
@keyframes immortalWaveAnim{
  0%{transform:scale(1);opacity:0.9;border-color:#c4940a}
  30%{opacity:0.5;border-color:#c4940a}
  60%{opacity:0.15;border-color:#ffe082}
  100%{transform:scale(1.3);opacity:0;border-color:transparent}
}
.immortal-spark{
  position:absolute;border-radius:50%;pointer-events:none;z-index:15;
  animation:immortalSparkAnim 1.8s ease-out forwards;
}
@keyframes immortalSparkAnim{
  0%{opacity:0;transform:scale(0)}
  8%{opacity:1;transform:scale(2)}
  20%{opacity:0.4;transform:scale(0.8)}
  35%{opacity:0.9;transform:scale(1.5)}
  50%{opacity:0.1;transform:scale(0.4)}
  65%{opacity:0.6;transform:scale(0.7)}
  80%{opacity:0.2;transform:scale(0.3)}
  100%{opacity:0;transform:scale(0)}
}
@keyframes immortalImpact{
  0%{transform:scale(1)}
  10%{transform:scale(1.08) translateY(-2px)}
  22%{transform:scale(1.05) translateY(1px)}
  38%{transform:scale(1.02)}
  60%{transform:scale(1.005)}
  100%{transform:scale(1)}
}
@keyframes immortalShake{
  0%{transform:translateX(0) scale(1)}
  5%{transform:translateX(-3px) scale(1.005)}
  10%{transform:translateX(4px) scale(1.02)}
  15%{transform:translateX(-5px) scale(1.035)}
  20%{transform:translateX(5px) scale(1.04)}
  25%{transform:translateX(-4px) scale(1.035)}
  35%{transform:translateX(3px) scale(1.03)}
  45%{transform:translateX(-2px) scale(1.02)}
  55%{transform:translateX(2px) scale(1.015)}
  65%{transform:translateX(-1px) scale(1.01)}
  80%{transform:translateX(0.5px) scale(1.005)}
  100%{transform:translateX(0) scale(1)}
}
.immortal-wave-ring{
  position:absolute;inset:-4px;border-radius:var(--radius);
  border:2px solid var(--warning);pointer-events:none;z-index:-1;
  animation:immortalWave 1.4s ease-out forwards;
}
@keyframes immortalWave{
  0%{transform:scale(1);opacity:0.9;border-color:var(--warning)}
  60%{opacity:0.3;border-color:var(--warning)}
  100%{transform:scale(1.2);opacity:0;border-color:transparent}
}
.item-time.immortal-time{color:var(--warning);font-weight:600;letter-spacing:0.02em;display:inline-flex;align-items:center;gap:0.3rem}
.icon-infinite-inline{animation:infinitePulse 2s ease-in-out infinite;vertical-align:middle}
.icon-infinite-inline .infinity-path{
  stroke-dasharray:60;stroke-dashoffset:0;
  animation:infinityDrawInline 3s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes infinitePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.15);opacity:0.8}
}
@keyframes infinityDrawInline{
  0%{stroke-dashoffset:60;stroke:var(--warning)}
  30%{stroke-dashoffset:0;stroke:var(--warning)}
  70%{stroke-dashoffset:0;stroke:var(--warning)}
  100%{stroke-dashoffset:-60;stroke:var(--warning)}
}
.item-card.immortal .extend-btn{opacity:0;pointer-events:none;width:0;padding:0;overflow:hidden}

/* ========== LOADING STATE ========== */
.loading-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4rem 1rem;color:var(--text-tertiary);animation:fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.pikachu-loader{
  width:48px;height:48px;
  background-image:url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/animated/25.gif');
  background-size:contain;background-repeat:no-repeat;image-rendering:pixelated;
  margin-bottom:0.75rem;
  animation:pikachuBreathe 2s ease-in-out infinite;
}
@keyframes pikachuBreathe{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,230,0,0.2));transform:scale(1)}
  50%{filter:drop-shadow(0 0 14px rgba(255,230,0,0.35));transform:scale(1.04)}
}
.loading-state p{font-size:0.82rem;font-weight:500;letter-spacing:0.01em;color:var(--text-secondary)}

/* ========== MICRO-INTERACTIONS ========== */
.btn,.btn-icon,.btn-download,.file-upload-label,.item-card{
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* ========== CUSTOM CURSOR ========== */
body{cursor:none!important}
body *,body *::before,body *::after{cursor:none!important}
body .btn-primary:disabled,body .extend-confirm:disabled{cursor:not-allowed!important}
.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;will-change:transform}
.cursor-ring{
  width:32px;height:32px;margin:-16px 0 0 -16px;
  border:1.5px solid var(--text);border-radius:50%;
  opacity:0.4;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),
  height 0.25s cubic-bezier(0.34,1.56,0.64,1),
  opacity 0.25s ease,
  border-color 0.3s ease,
  background 0.3s ease,
  box-shadow 0.3s ease;
}
.cursor-dot{
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:var(--text);border-radius:50%;
  transition:width 0.15s ease,height 0.15s ease,
  margin 0.15s ease,background 0.3s ease;
}
.cursor-ring.hovering{
  width:44px;height:44px;margin:-22px 0 0 -22px;
  opacity:0.6;
}
.cursor-dot.hovering{
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
}
.cursor-ring.card-hover{
  border-color:var(--success);
}
body.show-all-active .cursor-ring{
  border-color:var(--warning);opacity:0.6;
  box-shadow:0 0 10px rgba(196,148,10,0.3);
}
body.show-all-active .cursor-dot{
  background:var(--warning);
  box-shadow:0 0 6px rgba(196,148,10,0.4);
}
.cursor-click{
  position:fixed;pointer-events:none;z-index:99998;
  width:20px;height:20px;margin:-10px 0 0 -10px;
  border:1.5px solid var(--text);border-radius:50%;
  opacity:0;
}
@media(hover:none){
  .cursor-ring,.cursor-dot{display:none!important}
  body{cursor:auto}
}
@media(prefers-reduced-motion:reduce){
  .cursor-ring,.cursor-dot{transition:none}
}
#brand-title,.subtitle,.status,.github-link,.theme-toggle,
.text-input-wrapper,.file-upload-label,.items-section h2,.site-footer{
  opacity:0;
}

/* Input focus */
textarea:focus{border-color:var(--text-secondary);box-shadow:0 0 0 3px rgba(17,17,17,0.04),0 0 16px rgba(17,17,17,0.03);transform:translateY(-1px)}
textarea:not(:focus){box-shadow:none}

/* Status pulse */
.status.connected{
  animation:statusGlow 3s ease-in-out infinite;
}
@keyframes statusGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(52,101,56,0)}
  50%{box-shadow:0 0 10px 0 rgba(52,101,56,0.06)}
}
.status.connected .status-dot{
  background:var(--success);
  box-shadow:0 0 0 0 rgba(52,101,56,0.5);
  animation:pulseRing 2s infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(52,101,56,0.5)}
  70%{box-shadow:0 0 0 6px rgba(52,101,56,0)}
  100%{box-shadow:0 0 0 0 rgba(52,101,56,0)}
}

.progress-fill{transition:width 0.3s ease}

/* Accessibility */
*:focus{outline:none}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* Small utilities */
.muted{color:var(--text-tertiary);font-size:0.78rem}
.caps{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-tertiary);font-weight:600}

/* Spacer */
.spacer{height:48px}

/* ========== RESPONSIVE ========== */
@media(max-width:640px){
  #app{padding:2rem 1.25rem 3rem}
  .items-grid{grid-template-columns:1fr}
  h1{font-size:2.25rem}
  .subtitle{font-size:0.9rem}
  header{margin-bottom:2.5rem}
}

@media(max-width:900px){
  #app{padding-left:1.5rem;padding-right:1.5rem}
}

@media(max-width:420px){
  textarea{min-height:100px}
  .file-upload-label{padding:1.25rem}
}

/* ========== CALVIN & HOBBES ========== */
.calvin-strip{
  max-width:560px;margin:1.5rem auto 0;
}
.calvin-strip-inner{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.calvin-img{
  display:block;width:100%;height:auto;
}
.calvin-expand-btn{
  position:absolute;bottom:0.5rem;right:0.5rem;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);cursor:pointer;
  opacity:0;transition:all 0.2s;
}
.calvin-strip-inner:hover .calvin-expand-btn,
.calvin-expand-btn:focus{opacity:1;}
.calvin-expand-btn:hover{background:var(--surface-raised);border-color:var(--border-strong);}
.calvin-strip.hidden{display:none}
.calvin-error{
  max-width:560px;margin:1.5rem auto 0;padding:0.75rem 1rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);font-size:0.75rem;color:var(--text-tertiary);
  text-align:center;
}

/* Strip viewer overlay */
.calvin-viewer{
  position:fixed;inset:0;z-index:3000;
  display:flex;align-items:center;justify-content:center;
}
.calvin-viewer.hidden{display:none}
.calvin-viewer-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,0.4);
  backdrop-filter:blur(4px);
}
.calvin-viewer-panel{
  position:relative;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  width:min(95vw,1200px);max-height:95vh;display:flex;flex-direction:column;
}
.calvin-viewer-header{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.calvin-viewer-title{
  font-weight:500;font-size:0.8rem;color:var(--text);
  white-space:nowrap;
}
.cv-date-label{
  font-size:0.7rem;color:var(--text-tertiary);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.calvin-viewer-tools{
  display:flex;align-items:center;gap:0.25rem;flex-shrink:0;
}
.calvin-viewer-btn{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-xs);
  background:var(--surface);color:var(--text);cursor:pointer;
  transition:all 0.15s;
}
.calvin-viewer-btn:hover{background:var(--surface-raised);border-color:var(--border-strong);}
.calvin-viewer-sep{
  width:1px;height:20px;background:var(--border);flex-shrink:0;
}
.calvin-viewer-body{
  flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:0;min-height:200px;cursor:grab;
}
.calvin-viewer-body.panning{cursor:grabbing;}
.calvin-viewer-image{
  display:block;width:100%;height:auto;transform-origin:0 0;
}

@media(max-width:640px){
  .calvin-viewer-panel{max-width:100vw;max-height:100vh;border-radius:0;border:none;}
  .calvin-viewer-body{min-height:50vh;}
}

/* ========== FOOTER ========== */
.site-footer{
  margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--border);
  text-align:center;
}
.footer-links{display:inline-flex;align-items:center;gap:0.4rem}
.footer-links a{
  color:var(--text-tertiary);text-decoration:none;font-size:0.75rem;font-weight:500;
  transition:color 0.15s;
}
.footer-links a:hover{color:var(--text)}
.footer-sep{color:var(--text-tertiary);opacity:0.3;font-size:0.7rem}

/* ========== UTILITY ANIMATIONS ========== */
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Modal backdrop entrance */
.text-modal-backdrop{animation:fadeIn 0.15s ease-out}
.text-modal-panel{
  animation:modalIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
body.dialog-open #app{z-index:0}

/* ========== PARTICLES (easter egg) ========== */
#particles-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  overflow:hidden;display:none;
}
body.show-all-active #particles-bg{display:block}
.particle{
  position:absolute;bottom:-2px;border-radius:50%;
  background:radial-gradient(circle at center, var(--particle-color), var(--particle-color) 10%, transparent 56%);
  mix-blend-mode:screen;
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{transform:translate3d(0,0,0);opacity:0}
  5%{opacity:var(--o,0.6)}
  90%{opacity:var(--o,0.6)}
  100%{transform:translate3d(var(--dx,0),var(--dy,-120vh),0);opacity:0}
}

/* End of styles */