:root{--bg:#050510;--surface:rgba(255,255,255,0.035);--surface-hover:rgba(255,255,255,0.07);--border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.14);--text:#eeeef4;--text-dim:#6b6b8d;--accent-violet:#3b82f6;--accent-cyan:#22d3ee;--accent-rose:#f43f5e}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;overflow-y:hidden}

/* BG */
.mesh-bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.mesh-orb{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform}
.mesh-orb:nth-child(1){width:700px;height:700px;background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%);top:-20%;left:-10%;animation:o1 22s ease-in-out infinite}
.mesh-orb:nth-child(2){width:600px;height:600px;background:radial-gradient(circle,rgba(34,211,238,.18),transparent 70%);top:50%;right:-15%;animation:o2 28s ease-in-out infinite}
.mesh-orb:nth-child(3){width:500px;height:500px;background:radial-gradient(circle,rgba(244,63,94,.15),transparent 70%);bottom:-20%;left:30%;animation:o3 25s ease-in-out infinite}
.mesh-orb:nth-child(4){width:400px;height:400px;background:radial-gradient(circle,rgba(245,158,11,.1),transparent 70%);top:20%;right:30%;animation:o4 30s ease-in-out infinite}
@keyframes o1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(80px,60px) scale(1.15)}50%{transform:translate(30px,120px) scale(.95)}75%{transform:translate(-50px,40px) scale(1.08)}}
@keyframes o2{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(-70px,-50px) scale(1.1)}50%{transform:translate(-120px,30px) scale(.9)}75%{transform:translate(-40px,-80px) scale(1.05)}}
@keyframes o3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(100px,-60px) scale(1.12)}66%{transform:translate(-50px,-100px) scale(.92)}}
@keyframes o4{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,80px) scale(1.1)}66%{transform:translate(70px,-40px) scale(.95)}}
.grid-overlay{position:fixed;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* VISTAS */
.view{display:none;position:relative;z-index:10;flex-direction:column}
.view.active{display:flex;animation:fadeIn .35s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#view-links{min-height:100vh;overflow-y:auto}
#view-clock{height:100vh;overflow:hidden}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 48px;flex-shrink:0;animation:fadeDown .8s ease-out}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.logo{font-family:"Syne",sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.5px;text-decoration:none;color:var(--text);background:none;border:none;cursor:pointer;padding:0}
.logo span{color:var(--accent-violet)}
.topbar-right{display:flex;gap:8px;align-items:center}
.topbar-icon{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}
.topbar-icon:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-hover);transform:translateY(-1px)}
.topbar-icon svg{width:16px;height:16px;fill:currentColor}
/* TOOLS MENU BUTTON */
.tools-menu-btn{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);padding:0;flex-shrink:0}
.tools-menu-btn:hover,.tools-menu-btn[aria-expanded="true"]{background:var(--surface-hover);color:var(--text);border-color:var(--border-hover)}
.tools-menu-btn[aria-expanded="true"]{color:var(--accent-violet);border-color:rgba(59,130,246,.4)}
.tools-menu-btn svg{width:16px;height:16px;fill:currentColor}
/* TOOLS DROPDOWN */
.tools-menu{position:fixed;top:68px;right:44px;z-index:9000;background:rgba(10,10,28,.92);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;padding:8px;min-width:200px;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.tools-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.tools-menu-inner{display:flex;flex-direction:column;gap:2px}
.tools-menu-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--text-dim);text-decoration:none;font-size:.82rem;font-weight:500;transition:all .15s ease;cursor:pointer}
.tools-menu-item:hover{background:var(--surface);color:var(--text)}
.tools-menu-item.active{background:rgba(59,130,246,.12);color:var(--accent-violet)}
.tools-menu-ico{width:28px;height:28px;border-radius:8px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:inherit}
.tools-menu-item:hover .tools-menu-ico{border-color:var(--border-hover);background:var(--surface-hover)}
.tools-menu-item.active .tools-menu-ico{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3)}
.tools-menu-ico svg{width:14px;height:14px;fill:currentColor}

/* BOTTOMBAR */
.bottombar{display:flex;align-items:center;justify-content:space-between;padding:14px 48px;flex-shrink:0}
.footer-left{font-size:.7rem;color:var(--text-dim);font-weight:300;letter-spacing:1px;text-transform:uppercase}

/* SEGMENTOS — gradiente vertical compartido */
.clock-seg,.sw-seg,.tm-seg{display:inline-block;width:2.3ch;text-align:center;vertical-align:baseline;background:linear-gradient(180deg,#eeeef4 0%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.clock-sep,.sw-col,.tm-col{background:linear-gradient(180deg,#eeeef4 0%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── LINKS ── */
#view-links .topbar{padding:24px 48px}
#view-links .bottombar{padding:20px 48px}
.links-main{flex:1;display:flex;align-items:center;justify-content:center;padding:0 48px;gap:80px}
.hero{flex:0 0 auto;max-width:320px;animation:slideRight .9s cubic-bezier(.16,1,.3,1) both}
@keyframes slideRight{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
.avatar-wrapper{width:100px;height:100px;position:relative;margin-bottom:28px}
.avatar-glow{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent-violet),var(--accent-cyan),var(--accent-rose),var(--accent-violet));animation:spinGlow 6s linear infinite;opacity:.6;filter:blur(12px)}
@keyframes spinGlow{to{transform:rotate(360deg)}}
.avatar-ring{position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from 180deg,var(--accent-violet),var(--accent-cyan),var(--accent-rose),var(--accent-violet))}
.avatar-inner{width:100%;height:100%;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:"Syne",sans-serif;font-weight:800;font-size:32px;color:var(--accent-cyan);overflow:hidden}
.avatar-inner img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hero h1{font-family:"Syne",sans-serif;font-weight:800;font-size:2.8rem;line-height:1.05;letter-spacing:-2px;margin-bottom:12px}
.hero h1 .accent{background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .tagline{color:var(--text-dim);font-size:1.05rem;font-weight:300;line-height:1.6;max-width:280px}
.hero .status{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 16px;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.12);border-radius:100px;font-size:.8rem;color:var(--accent-cyan);font-weight:500}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-cyan);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,211,238,.4)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(34,211,238,0)}}
.links-grid{display:grid;grid-template-columns:repeat(3,190px);grid-auto-rows:170px;gap:14px;animation:slideLeft .9s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes slideLeft{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
.link-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:var(--text);overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer}
.link-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.3)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:2}
.card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-icon svg{width:22px;height:22px;fill:currentColor}
.card-arrow{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:13px;transition:all .35s;flex-shrink:0}
.link-card:hover .card-arrow{background:rgba(255,255,255,.08);color:var(--text);transform:translate(2px,-2px)}
.card-bottom{position:relative;z-index:2}
.card-title{font-family:"Syne",sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.3px;margin-bottom:3px}
.card-desc{color:var(--text-dim);font-size:.78rem;font-weight:300;line-height:1.4}
.card-tag{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:6px;font-size:.65rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase}
.footer-right{display:flex;gap:24px}
.footer-link{font-size:.75rem;color:var(--text-dim);text-decoration:none;transition:color .3s}
.footer-link:hover{color:var(--text)}

/* ── CLOCK TABS ── */
.tabs-bar{display:flex;justify-content:center;gap:8px;padding:0 48px 16px;flex-shrink:0}
.tab-btn{font-family:"Syne",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;padding:8px 22px;border-radius:100px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}
.tab-btn:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-hover)}
.tab-btn.active{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3);color:var(--accent-violet)}
.clock-main{flex:1;display:flex;align-items:center;justify-content:center;padding:0 48px 16px;overflow:hidden}
.panel{display:none;width:100%;max-width:860px;animation:fadeIn .35s ease-out}
.panel.active{display:flex;flex-direction:column;align-items:center}

/* ── CLOCK ── */
.clock-display{text-align:center}
.clock-time{font-family:"Syne",sans-serif;font-weight:800;font-size:min(13vw,10.5rem);line-height:1;display:flex;justify-content:center;align-items:baseline;margin-bottom:18px}
.clock-sep{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.clock-bar{width:280px;height:2px;background:var(--surface);border-radius:2px;margin:0 auto 18px;overflow:hidden}
.clock-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-cyan));transition:width .4s linear}
.clock-date{font-size:1rem;font-weight:300;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase}

/* ── ALARM ── */
.alarm-panel{width:100%;max-width:480px}
.glass-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px}
.glass-card h3{font-family:"Syne",sans-serif;font-weight:700;font-size:.95rem;margin-bottom:16px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.t-input,.l-input{flex:1;min-width:110px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.9rem;outline:none;transition:border-color .25s}
.t-input{font-family:"Syne",sans-serif;font-weight:700;-webkit-appearance:none;appearance:none}
.t-input::-webkit-date-and-time-value{text-align:left}
.t-input:focus,.l-input:focus{border-color:rgba(59,130,246,.4)}
.t-input::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer}
.btn-add{padding:10px 20px;border-radius:10px;background:rgba(59,130,246,.18);color:var(--accent-violet);border:1px solid rgba(59,130,246,.3);font-family:"DM Sans",sans-serif;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .25s;white-space:nowrap}
.btn-add:hover{background:rgba(59,130,246,.28);transform:translateY(-1px)}
.alarms-list{margin-top:14px;display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto}
.alarms-list::-webkit-scrollbar{width:3px}
.alarms-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.alarm-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;transition:border-color .3s}
.alarm-item.ring{border-color:rgba(244,63,94,.5);animation:rpulse .9s ease-in-out infinite}
@keyframes rpulse{0%,100%{background:var(--surface)}50%{background:rgba(244,63,94,.07)}}
.ai-time{font-family:"Syne",sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-1px}
.ai-label{font-size:.75rem;color:var(--text-dim);margin-top:2px}
.ai-right{display:flex;align-items:center;gap:12px}
.tog{position:relative;width:42px;height:22px;cursor:pointer}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;border-radius:100px;background:var(--surface);border:1px solid var(--border);transition:all .3s}
.tog input:checked+.tog-track{background:rgba(59,130,246,.25);border-color:rgba(59,130,246,.5)}
.tog-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:all .3s;pointer-events:none}
.tog input:checked~.tog-thumb{background:var(--accent-violet);transform:translateX(20px)}
.btn-del{background:rgba(244,63,94,.1);color:var(--accent-rose);border:1px solid rgba(244,63,94,.18);border-radius:8px;padding:5px 10px;font-size:.75rem;cursor:pointer;transition:all .25s}
.btn-del:hover{background:rgba(244,63,94,.2)}
.no-alarms{text-align:center;padding:32px;color:var(--text-dim);font-size:.88rem}
.a-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(5,5,16,.85);backdrop-filter:blur(10px);align-items:center;justify-content:center}
.a-overlay.show{display:flex}
.a-modal{background:#0b0b1c;border:1px solid rgba(244,63,94,.3);border-radius:24px;padding:48px 40px;text-align:center;max-width:340px;width:90%;animation:mIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes mIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.a-modal-ico{font-size:3rem;margin-bottom:14px;display:inline-block;animation:shake .5s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.a-modal h2{font-family:"Syne",sans-serif;font-weight:800;font-size:1.55rem;margin-bottom:8px}
.a-modal p{color:var(--text-dim);font-size:.9rem;margin-bottom:24px}
.btn-stop{padding:12px 36px;border-radius:12px;background:rgba(244,63,94,.18);color:var(--accent-rose);border:1px solid rgba(244,63,94,.3);font-family:"Syne",sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.5px;cursor:pointer;transition:all .25s}
.btn-stop:hover{background:rgba(244,63,94,.28);transform:translateY(-1px)}

/* ── STOPWATCH ── */
.sw-time{font-family:"Syne",sans-serif;font-weight:800;font-size:min(8vw,6.5rem);text-align:center;margin-bottom:6px;white-space:nowrap;line-height:1}
.sw-ms-wrap{font-size:.45em;vertical-align:baseline}
.sw-ms-dot{-webkit-text-fill-color:rgba(34,211,238,.65);color:rgba(34,211,238,.65)}
.sw-ms-seg{display:inline-block;width:3.3ch;text-align:left;vertical-align:baseline;-webkit-text-fill-color:rgba(34,211,238,.65);color:rgba(34,211,238,.65)}
.ctrl-row{display:flex;gap:10px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.cb{padding:11px 26px;border-radius:12px;font-family:"Syne",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;border:none;transition:all .3s cubic-bezier(.4,0,.2,1)}
.cb:disabled{opacity:.28;cursor:not-allowed;transform:none!important}
.cb-go{background:rgba(34,211,238,.14);color:var(--accent-cyan);border:1px solid rgba(34,211,238,.28)}
.cb-go:hover:not(:disabled){background:rgba(34,211,238,.24);transform:translateY(-2px)}
.cb-stop{background:rgba(244,63,94,.14);color:var(--accent-rose);border:1px solid rgba(244,63,94,.28)}
.cb-stop:hover:not(:disabled){background:rgba(244,63,94,.24);transform:translateY(-2px)}
.cb-lap{background:rgba(59,130,246,.12);color:var(--accent-violet);border:1px solid rgba(59,130,246,.24)}
.cb-lap:hover:not(:disabled){background:rgba(59,130,246,.22);transform:translateY(-2px)}
.cb-rst{background:var(--surface);color:var(--text-dim);border:1px solid var(--border)}
.cb-rst:hover:not(:disabled){background:var(--surface-hover);color:var(--text);transform:translateY(-2px)}
.laps{width:100%;max-width:420px;max-height:180px;overflow-y:auto}
.laps::-webkit-scrollbar{width:3px}
.laps::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.lap-row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid var(--border);font-size:.83rem}
.lap-row:last-child{border-bottom:none}
.lap-n{color:var(--text-dim);font-size:.72rem;min-width:32px}
.lap-t{font-family:"Syne",sans-serif;font-weight:600}
.lap-d{color:var(--text-dim);font-size:.72rem}
.lap-best .lap-t{color:var(--accent-cyan)}
.lap-worst .lap-t{color:var(--accent-rose)}

/* ── TIMER ── */
.timer-wrap{display:flex;flex-direction:column;align-items:center;gap:0}
.ring-wrap{position:relative;width:210px;height:210px;margin-bottom:20px}
.ring-svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.05);stroke-width:8}
.ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray .8s linear}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-time{font-family:"Syne",sans-serif;font-weight:800;font-size:2.6rem;text-align:center;white-space:nowrap}
.timer-status{font-size:.7rem;color:var(--text-dim);margin-top:4px;text-transform:uppercase;letter-spacing:1px}
.timer-inputs{display:flex;gap:8px;align-items:flex-end;margin-bottom:18px}
.t-grp{display:flex;flex-direction:column;align-items:center;gap:5px}
.t-grp label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
.t-num{width:68px;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:10px 6px;color:var(--text);font-family:"Syne",sans-serif;font-weight:700;font-size:1.35rem;outline:none;transition:border-color .25s;-moz-appearance:textfield}
.t-num::-webkit-outer-spin-button,.t-num::-webkit-inner-spin-button{-webkit-appearance:none}
.t-num:focus{border-color:rgba(59,130,246,.4)}
.t-sep{font-family:"Syne",sans-serif;font-weight:800;font-size:1.5rem;color:var(--text-dim);padding-bottom:10px}
.timer-inputs.locked{opacity:.35;pointer-events:none}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* Tablet landscape */
@media(max-width:1100px){
  .links-main{gap:50px;padding:0 32px}
  .links-grid{grid-template-columns:repeat(2,190px)}
}

/* Tablet portrait */
@media(max-width:768px){
  /* Unlock vertical scroll on mobile */
  body{overflow-y:auto}
  html,body{height:auto}

  /* Views */
  #view-links{min-height:100vh;overflow-y:visible}
  #view-clock{height:auto;min-height:100vh;overflow-y:auto}

  /* Topbar / footer */
  .topbar,.bottombar{padding:14px 20px}
  #view-links .topbar{padding:16px 20px}
  #view-links .bottombar{padding:16px 20px}
  .footer-right{display:none}
  .tools-menu{top:60px;right:16px}

  /* Hero / links */
  .support-cta-wrap{padding:8px 20px 0}
  .links-main{flex-direction:column;padding:24px 20px 48px;gap:32px;align-items:center}
  .hero{text-align:center;max-width:100%}
  .avatar-wrapper{margin:0 auto 24px}
  .hero .tagline{margin:0 auto;max-width:300px}
  .hero h1{font-size:2.2rem}
  .links-grid{grid-template-columns:repeat(2,1fr);width:100%;max-width:440px;gap:12px}
  .link-card:last-child:nth-child(odd){grid-column:1/-1}

  /* Clock tabs */
  .tabs-bar{padding:0 16px 14px;gap:6px}
  .tab-btn{padding:7px 16px;font-size:.75rem}
  .clock-main{padding:0 16px 20px;padding-top:4px}

  /* Alarm */
  .alarm-panel{max-width:100%;width:100%}
  .alarms-list{max-height:220px}

  /* Timer ring */
  .ring-wrap{width:185px;height:185px}
  .ring-svg{width:185px;height:185px}
}

/* Large phone */
@media(max-width:540px){
  /* Topbar */
  .topbar{padding:12px 16px}
  .logo{font-size:.95rem}
  .topbar-icon{width:32px;height:32px}
  .topbar-right{gap:5px}
  .tools-menu-btn{width:32px;height:32px}
  .tools-menu{top:56px;right:12px;min-width:180px}

  /* Hero */
  .hero h1{font-size:1.9rem}
  .links-main{padding:20px 16px 48px;gap:28px}

  /* Links grid — single column */
  .links-grid{grid-template-columns:1fr;max-width:100%;gap:10px}
  .link-card:last-child:nth-child(odd){grid-column:auto}
  .link-card{min-height:120px}

  /* Clock panel — font-size derived from available width so digits never overflow */
  .clock-time{font-size:calc((100vw - 32px) / 9)}
  .clock-bar{width:200px}
  .clock-date{font-size:.8rem;letter-spacing:1px}

  /* Timer ring */
  .ring-wrap{width:160px;height:160px}
  .ring-svg{width:160px;height:160px}
  .timer-time{font-size:1.9rem}
  .timer-wrap{gap:0}
  .timer-inputs{gap:4px;margin-bottom:14px}
  .t-num{width:56px;font-size:1.1rem;padding:8px 4px}
  .t-sep{font-size:1.2rem;padding-bottom:8px}

  /* Alarm form — stack vertically */
  .form-row{flex-direction:column;gap:8px}
  .t-input,.l-input{width:100%;min-width:0;flex:none}
  .btn-add{width:100%;text-align:center}

  /* Tabs — 2×2 grid */
  .tabs-bar{flex-wrap:wrap;gap:6px;padding:0 16px 12px}
  .tab-btn{flex:1 0 calc(50% - 3px)}

  /* Controls */
  .ctrl-row{gap:8px}
  .cb{padding:10px 20px;font-size:.78rem}

  /* Laps */
  .laps{max-height:150px}

  /* Footer */
  .bottombar{padding:12px 16px}
}

/* Small phone */
@media(max-width:380px){
  .hero h1{font-size:1.6rem}
  .ring-wrap{width:140px;height:140px}
  .ring-svg{width:140px;height:140px}
  .timer-time{font-size:1.6rem}
  .t-num{width:50px;font-size:1rem}
  .t-sep{font-size:1.1rem}
  .tab-btn{padding:6px 10px;font-size:.7rem}
}

/* ══ SPEEDTEST ══════════════════════════════════════════════════════════════ */
#view-speedtest{min-height:100vh}

.st-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 48px 32px;gap:24px}

/* Cabecera */
.st-header{text-align:center}
.st-title{font-family:"Syne",sans-serif;font-weight:800;font-size:2rem;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.st-sub{color:var(--text-dim);font-size:.85rem;font-weight:300}

/* Gauge */
.st-gauge-wrap{position:relative;width:220px;height:180px;flex-shrink:0}
.st-ring-svg{width:220px;height:220px;position:absolute;top:0;left:0}
.st-arc-bg{stroke:rgba(255,255,255,.05)}
.st-arc-fill{transition:stroke-dasharray .5s cubic-bezier(.4,0,.2,1)}
.st-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:28px}
.st-big-num{font-family:"Syne",sans-serif;font-weight:800;font-size:2.8rem;letter-spacing:-2px;line-height:1;background:linear-gradient(180deg,#eeeef4 0%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-width:5ch;text-align:center}
.st-big-unit{font-family:"Syne",sans-serif;font-weight:700;font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}
.st-phase-lbl{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-top:6px}

/* Métricas */
.st-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:520px}
.st-metric{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .3s,background .3s}
.st-metric-active{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.06)}
.st-metric-done{border-color:rgba(255,255,255,.09)}
.st-metric-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.st-metric-icon svg{width:16px;height:16px;fill:currentColor}
.st-icon-dl{background:rgba(34,211,238,.1);color:var(--accent-cyan)}
.st-icon-ul{background:rgba(244,63,94,.1);color:var(--accent-rose)}
.st-icon-ping{background:rgba(59,130,246,.1);color:var(--accent-violet)}
.st-icon-jitter{background:rgba(139,92,246,.1);color:#a78bfa}
.st-metric-vals{display:flex;align-items:baseline;gap:3px}
.st-metric-num{font-family:"Syne",sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.5px}
.st-metric-unit{font-size:.65rem;color:var(--text-dim);font-weight:500}
.st-metric-label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}

/* IP */
.st-ip{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-dim)}
.st-ip svg{width:14px;height:14px;fill:var(--text-dim);flex-shrink:0}

/* Botón principal */
.st-btn{padding:14px 56px;border-radius:100px;font-family:"Syne",sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(34,211,238,.2));border:1px solid rgba(59,130,246,.35);color:var(--accent-cyan);transition:all .3s cubic-bezier(.4,0,.2,1)}
.st-btn:hover{background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(34,211,238,.3));transform:translateY(-2px);box-shadow:0 8px 32px rgba(34,211,238,.15)}
.st-btn-stop{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.3);color:var(--accent-rose)}
.st-btn-stop:hover{background:rgba(244,63,94,.2);box-shadow:0 8px 32px rgba(244,63,94,.15)}

/* Atribución */
.st-credit{font-size:.68rem;color:var(--text-dim)}
.st-credit a{color:var(--text-dim);text-decoration:underline;text-underline-offset:3px}
.st-credit a:hover{color:var(--text)}

/* Historial */
.st-history{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px}
.st-hist-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.st-hist-title{font-family:"Syne",sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.8px;text-transform:uppercase;color:var(--text-dim)}
.st-hist-clear{background:none;border:none;cursor:pointer;font-size:.72rem;color:var(--text-dim);padding:0;font-family:inherit;transition:color .2s}
.st-hist-clear:hover{color:var(--accent-rose)}
.st-hist-list{display:flex;flex-direction:column;gap:6px}
.st-hist-row{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:grid;grid-template-columns:auto repeat(4,1fr);gap:6px 10px;align-items:center;transition:border-color .2s}
.st-hist-row:hover{border-color:var(--border-hover)}
.st-hist-date{font-size:.65rem;color:var(--text-dim);white-space:nowrap;padding-right:4px;border-right:1px solid var(--border)}
.st-hist-val{display:flex;flex-direction:column;align-items:center;gap:2px}
.st-hist-num{font-family:"Syne",sans-serif;font-weight:700;font-size:.8rem}
.st-hist-lbl{font-size:.58rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.st-hist-dl .st-hist-num{color:var(--accent-cyan)}
.st-hist-ul .st-hist-num{color:var(--accent-violet)}
.st-hist-ping .st-hist-num,.st-hist-jitter .st-hist-num{color:var(--text)}

/* Responsive speedtest */
@media(max-width:768px){
  .st-main{padding:12px 20px 28px;gap:20px}
  .st-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:400px){
  .st-big-num{font-size:2.2rem}
  .st-metrics{gap:8px}
  .st-metric{padding:12px 10px}
  .st-metric-num{font-size:1rem}
  .st-btn{padding:12px 40px}
  .st-hist-row{grid-template-columns:auto repeat(2,1fr);row-gap:6px}
  .st-hist-date{grid-column:1/-1;border-right:none;padding-right:0;border-bottom:1px solid var(--border);padding-bottom:6px}
}

/* ══ CONVERSOR ═══════════════════════════════════════════════════════════════ */
#view-converter,#view-compress{min-height:100vh}

.conv-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 48px 32px;gap:18px}

/* Cabecera */
.conv-header{text-align:center;max-width:520px}
.conv-title{font-family:"Syne",sans-serif;font-weight:800;font-size:2rem;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.conv-sub{color:var(--text-dim);font-size:.85rem;font-weight:300;line-height:1.6}

/* Zona de drop */
.conv-drop{width:100%;max-width:520px;border:1.5px dashed var(--border);border-radius:20px;padding:36px 24px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:var(--surface)}
.conv-drop:hover,.conv-drop.drag-over{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.06)}
.conv-drop.drag-over{transform:scale(1.015)}
.conv-drop.has-file{border-style:solid;border-color:rgba(59,130,246,.25);cursor:default}
.conv-drop-ico{width:42px;height:42px;fill:var(--text-dim);margin:0 auto 14px;display:block;transition:fill .3s}
.conv-drop:not(.has-file):hover .conv-drop-ico{fill:var(--accent-violet)}
.conv-drop-title{font-family:"Syne",sans-serif;font-weight:700;font-size:.95rem;margin-bottom:5px}
.conv-drop-hint{font-size:.78rem;color:var(--text-dim)}
#conv-file,#exif-file,#cmp-file{display:none}

/* Drop zone — estado archivo seleccionado */
#drop-ready{display:flex;flex-direction:column;align-items:center;gap:8px}
.drop-badge{padding:4px 10px;border-radius:8px;font-family:"Syne",sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.8px}
.drop-badge-image{background:rgba(34,211,238,.12);color:var(--accent-cyan)}
.drop-badge-audio{background:rgba(59,130,246,.12);color:var(--accent-violet)}
.drop-badge-video{background:rgba(244,63,94,.12);color:var(--accent-rose)}
.drop-fname{font-family:"Syne",sans-serif;font-weight:700;font-size:.95rem;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-fsize{font-size:.75rem;color:var(--text-dim)}
.drop-change{font-size:.75rem;color:var(--text-dim);background:none;border:1px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer;margin-top:2px;transition:all .25s}
.drop-change:hover{color:var(--text);border-color:var(--border-hover)}

/* Tarjeta de controles */
.conv-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 20px}
.conv-row{display:flex;gap:12px;align-items:flex-end}
.conv-field{flex:1;display:flex;flex-direction:column;gap:6px}
.conv-label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
.conv-select{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.9rem;outline:none;cursor:pointer;transition:border-color .25s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b6b8d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.conv-select:focus{border-color:rgba(59,130,246,.4)}
.conv-btn-main{white-space:nowrap;flex-shrink:0}

/* Barra de progreso */
.conv-progress{width:100%;max-width:520px;text-align:center}
.conv-prog-bar{height:3px;background:var(--surface);border-radius:2px;overflow:hidden;margin-bottom:14px}
.conv-prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-cyan));transition:width .4s linear}
.conv-prog-text{font-size:.84rem;color:var(--text-dim);transition:color .3s}

/* Resultado */
.conv-result{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.conv-result .cb{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* Formatos soportados */
.conv-formats{text-align:center;max-width:520px}
.conv-formats-title{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.conv-fmt-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fmt-badge{padding:3px 9px;border-radius:6px;font-size:.65rem;font-weight:500;letter-spacing:.4px;text-transform:uppercase}
.fmt-img{background:rgba(34,211,238,.08);color:rgba(34,211,238,.7)}
.fmt-aud{background:rgba(59,130,246,.08);color:rgba(59,130,246,.7)}
.fmt-vid{background:rgba(244,63,94,.08);color:rgba(244,63,94,.7)}

/* Compresor específico */
.cmp-settings-card{display:flex;flex-direction:column;gap:18px}
.cmp-section{display:flex;flex-direction:column;gap:10px}
.cmp-section-label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
.cmp-method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cmp-method-btn{padding:8px 6px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:"Syne",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.4px;cursor:pointer;transition:all .25s}
.cmp-method-btn:hover{background:var(--surface-hover);color:var(--text)}
.cmp-method-btn.active{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.35);color:var(--accent-violet)}
.cmp-slider-wrap{display:flex;align-items:center;gap:12px}
.cmp-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.08);outline:none;cursor:pointer}
.cmp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-violet);cursor:pointer;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.cmp-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-violet);border:none;cursor:pointer}
.cmp-slider-val{font-family:"Syne",sans-serif;font-weight:700;font-size:.88rem;min-width:3ch;text-align:right;color:var(--accent-cyan)}
.cmp-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cmp-preset-btn{padding:7px 4px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:"Syne",sans-serif;font-weight:700;font-size:.65rem;letter-spacing:.3px;cursor:pointer;transition:all .25s;text-align:center}
.cmp-preset-btn:hover{background:var(--surface-hover);color:var(--text)}
.cmp-preset-btn.active{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.35);color:var(--accent-violet)}
.cmp-preset-axis{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-dim);margin-top:5px;padding:0 2px;opacity:.7}
.cmp-opts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cmp-dur{font-size:.72rem;color:var(--text-dim);margin-top:-4px}
.cmp-size-compare{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.cmp-sz-box{text-align:center;display:flex;flex-direction:column;gap:3px}
.cmp-sz-lbl{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.cmp-sz-val{font-family:"Syne",sans-serif;font-weight:700;font-size:1rem}
.cmp-sz-new{color:var(--accent-cyan)}
.cmp-sz-pct{font-family:"Syne",sans-serif;font-weight:800;font-size:1.1rem}
.cmp-sz-arrow{width:20px;height:20px;fill:var(--text-dim);flex-shrink:0}
.cmp-result-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px}
.cmp-result-sizes{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.cmp-rs-item{text-align:center;display:flex;flex-direction:column;gap:3px}
.cmp-rs-lbl{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.cmp-rs-val{font-family:"Syne",sans-serif;font-weight:700;font-size:1.1rem}
.cmp-rs-new{color:var(--accent-cyan)}
.cmp-rs-arrow{font-size:1.2rem;color:var(--text-dim);flex-shrink:0}
.cmp-rs-badge{padding:5px 14px;border-radius:100px;font-family:"Syne",sans-serif;font-weight:800;font-size:.9rem}
.cmp-estimate{display:flex;align-items:stretch;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.cmp-est-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;flex:1}
.cmp-est-sep{width:1px;background:var(--border)}
.cmp-est-lbl{font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.cmp-est-val{font-family:"Syne",sans-serif;font-weight:700;font-size:.88rem;color:var(--accent-cyan)}

/* Responsive conversor */
/* ─── BATCH LIST ─────────────────────────────────────────────────────────── */
.batch-list{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.batch-list-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);font-size:.72rem;color:var(--text-dim)}
.batch-list-header button{background:none;border:none;color:var(--accent-violet);font-size:.78rem;font-family:"Syne",sans-serif;font-weight:700;cursor:pointer;padding:2px 8px;border-radius:6px;transition:background .2s}
.batch-list-header button:hover{background:rgba(59,130,246,.1)}
.batch-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
.batch-item:last-child{border-bottom:none}
.batch-item-name{flex:1;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.batch-item-size{font-size:.72rem;color:var(--text-dim);white-space:nowrap;flex-shrink:0}
.batch-item-status{font-size:.7rem;white-space:nowrap;color:var(--text-dim);flex-shrink:0}
.batch-item-status.converting{color:var(--accent-violet)}
.batch-item-status.done{color:var(--accent-cyan)}
.batch-item-status.error{color:var(--accent-rose)}
.batch-item-dl{font-size:.72rem;color:var(--accent-cyan);text-decoration:none;white-space:nowrap;font-weight:700;padding:3px 8px;border-radius:8px;background:rgba(34,211,238,.1);transition:background .2s;flex-shrink:0}
.batch-item-dl:hover{background:rgba(34,211,238,.2)}
.batch-item-rm{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.9rem;line-height:1;padding:2px 6px;border-radius:6px;transition:all .2s;flex-shrink:0}
.batch-item-rm:hover{color:var(--accent-rose);background:rgba(244,63,94,.1)}

/* ══ QR GENERATOR ════════════════════════════════════════════════════════════ */
#view-qr{height:100vh;overflow:hidden}
.qr-shell{flex:1;display:flex;min-height:0}
.qr-options-panel{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:18px;padding:28px 24px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border)}
.qr-panel-title{font-family:"Syne",sans-serif;font-weight:700;font-size:1.05rem;color:var(--text)}
.qr-preview-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;position:relative}
.qr-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-dim);padding:48px 24px;border:1px dashed var(--border);border-radius:20px;width:min(360px,100%)}
.qr-empty-state svg{width:52px;height:52px;fill:var(--border-hover)}
.qr-empty-state p{font-size:.9rem;font-weight:500}
.qr-empty-state span{font-size:.75rem;text-align:center}
.qr-generated{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;width:100%;height:100%}
#qr-canvas{border-radius:14px;max-width:min(100%,520px);max-height:calc(100% - 80px);height:auto!important;width:auto!important;display:block;box-shadow:0 8px 40px rgba(0,0,0,.45)}
.qr-field{display:flex;flex-direction:column;gap:7px}
.qr-hint{font-size:.64rem;color:var(--text-dim)}
.qr-textarea{background:var(--surface-hover);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:.83rem;font-family:inherit;resize:vertical;transition:border-color .2s;line-height:1.5}
.qr-textarea:focus{outline:none;border-color:rgba(59,130,246,.4)}
.qr-colors-row{display:flex;gap:10px}
.qr-color-field{flex:1;display:flex;flex-direction:column;gap:7px}
.qr-color-wrap{display:flex;align-items:center;gap:8px;background:var(--surface-hover);border:1px solid var(--border);border-radius:10px;padding:6px 10px}
.qr-color-input{width:26px;height:26px;border:none;border-radius:6px;cursor:pointer;padding:0;background:none;flex-shrink:0}
.qr-color-lbl{font-size:.75rem;color:var(--text-dim);font-family:monospace;letter-spacing:.5px}
.qr-gen-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto}
.qr-dl-btn{display:flex;align-items:center;gap:8px}

/* ══ EXIF READER ═════════════════════════════════════════════════════════════ */
#view-exif{min-height:100vh}
.exif-shell{flex:1;display:flex;flex-direction:column;padding:8px 48px 32px;gap:16px;min-height:0}
.exif-dropzone{flex:1;display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);border-radius:20px;cursor:pointer;transition:border-color .2s,background .2s;min-height:340px;position:relative}
.exif-dropzone:hover,.exif-dropzone.drag{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.04)}
#exif-drop-idle{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.exif-drop-ico{width:56px;height:56px;fill:var(--text-dim);margin-bottom:4px}
.exif-drop-title{font-size:1.05rem;font-weight:600;color:var(--text)}
.exif-drop-sub{font-size:.82rem;color:var(--text-dim)}
.exif-drop-hint{font-size:.72rem;color:var(--text-dim);margin-top:4px}
.exif-drop-privacy{font-size:.68rem;color:var(--text-dim);opacity:.6}
#exif-file{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.exif-content{display:flex;flex-direction:column;gap:14px}
.exif-header-card{display:flex;gap:16px;align-items:flex-start;margin-bottom:0}
.exif-thumb-wrap{flex-shrink:0;width:88px;height:88px;border-radius:10px;overflow:hidden;background:var(--surface-hover);border:1px solid var(--border)}
.exif-thumb{width:100%;height:100%;object-fit:cover;display:block}
.exif-info{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.exif-filename{font-size:.84rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exif-filesize{font-size:.74rem;color:var(--text-dim)}
.exif-gps-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.2);border-radius:8px;padding:4px 8px;width:fit-content}
.exif-gps-link{font-size:.73rem;color:var(--accent-cyan);text-decoration:none}
.exif-gps-link:hover{text-decoration:underline}
.exif-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.exif-table-card{padding:0!important;overflow:hidden;margin-bottom:16px}
.exif-table{width:100%;border-collapse:collapse;font-size:.79rem}
.exif-table .exif-group-header{background:rgba(59,130,246,.08);color:var(--accent-violet);font-family:"Syne",sans-serif;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;padding:9px 16px;border-bottom:1px solid var(--border)}
.exif-table .exif-key{padding:7px 16px;color:var(--text-dim);font-size:.76rem;border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap;width:42%;vertical-align:top}
.exif-table .exif-val{padding:7px 16px;color:var(--text);font-size:.76rem;border-bottom:1px solid rgba(255,255,255,.04);word-break:break-word}
.exif-table tr:last-child .exif-key,.exif-table tr:last-child .exif-val{border-bottom:none}
.exif-table tr:hover .exif-key,.exif-table tr:hover .exif-val{background:rgba(255,255,255,.018)}

@media(max-width:768px){
  .conv-main{padding:16px 20px 32px;gap:16px}
  .conv-title{font-size:1.7rem}
  #view-qr{height:auto;min-height:100vh;overflow:auto}
  .qr-shell{flex-direction:column}
  .qr-options-panel{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:20px}
  .qr-preview-panel{padding:20px;min-height:320px}
  .exif-shell{padding:8px 20px 24px}
}
@media(max-width:540px){
  .conv-main{padding:12px 16px 28px;gap:14px}
  .conv-title{font-size:1.4rem}
  .conv-drop{padding:28px 18px}
  .conv-row{flex-direction:column;align-items:stretch}
  .conv-btn-main{width:100%;justify-content:center}
  .qr-colors-row{flex-direction:column}
  .exif-header-card{flex-direction:column}
  .exif-thumb-wrap{width:100%;height:180px}
  .exif-shell{padding:8px 12px 20px}
}

/* ══ DONATION MODAL ══════════════════════════════════════════════════════════ */

/* Support CTA (below grid) */
.support-cta-wrap{display:flex;justify-content:center;padding:8px 48px 0;animation:slideLeft .9s cubic-bezier(.16,1,.3,1) .2s both}
.support-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:100px;background:rgba(244,114,182,.07);border:1px solid rgba(244,114,182,.15);color:rgba(244,114,182,.6);font-family:"DM Sans",sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:.2px}
.support-cta-btn:hover{background:rgba(244,114,182,.13);border-color:rgba(244,114,182,.3);color:#f472b6;transform:translateY(-1px)}

/* Overlay */
.don-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(5,5,16,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);align-items:center;justify-content:center;padding:20px}
.don-overlay.show{display:flex;animation:fadeIn .2s ease-out}

/* Modal box */
.don-modal{position:relative;background:#0b0b1e;border:1px solid rgba(244,114,182,.18);border-radius:24px;padding:40px 36px 32px;width:100%;max-width:420px;animation:mIn .35s cubic-bezier(.16,1,.3,1);text-align:center}

/* Close */
.don-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s}
.don-close:hover{background:rgba(255,255,255,.08);color:var(--text)}
.don-close svg{width:14px;height:14px}

/* Icon */
.don-icon{width:56px;height:56px;border-radius:50%;background:rgba(244,114,182,.12);border:1px solid rgba(244,114,182,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.don-icon svg{width:26px;height:26px;fill:#f472b6}

/* Text */
.don-title{font-family:"Syne",sans-serif;font-weight:800;font-size:1.45rem;letter-spacing:-.5px;margin-bottom:8px}
.don-sub{color:var(--text-dim);font-size:.85rem;font-weight:300;line-height:1.6;margin-bottom:22px}

/* Frequency toggle */
.don-freq{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px;margin-bottom:16px}
.don-freq-btn{flex:1;padding:7px;border-radius:9px;background:none;border:none;color:var(--text-dim);font-family:"Syne",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.3px;cursor:pointer;transition:all .25s}
.don-freq-btn.active{background:rgba(244,114,182,.18);color:#f472b6;border:1px solid rgba(244,114,182,.3)}
.don-freq-btn:not(.active):hover{color:var(--text)}

/* Amount presets */
.don-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.don-amt{padding:10px 6px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:"Syne",sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .25s}
.don-amt:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-hover)}
.don-amt.active{background:rgba(244,114,182,.15);border-color:rgba(244,114,182,.4);color:#f472b6}

/* Custom input */
.don-custom-wrap{position:relative;margin-bottom:20px}
.don-custom-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-family:"Syne",sans-serif;font-weight:700;font-size:.9rem;pointer-events:none}
.don-custom-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:10px 14px 10px 28px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.9rem;outline:none;transition:border-color .25s;-moz-appearance:textfield}
.don-custom-input::-webkit-outer-spin-button,.don-custom-input::-webkit-inner-spin-button{-webkit-appearance:none}
.don-custom-input:focus{border-color:rgba(244,114,182,.4)}
.don-custom-input::placeholder{color:var(--text-dim)}
.don-custom-input.active{border-color:rgba(244,114,182,.4)}

/* Name / message fields */
.don-fields{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.don-field-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.85rem;outline:none;transition:border-color .25s;resize:none}
.don-field-input::placeholder{color:var(--text-dim)}
.don-field-input:focus{border-color:rgba(244,114,182,.35)}
.don-field-msg{line-height:1.5;min-height:58px}

/* Payment method badges */
.don-methods{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:22px}
.don-method-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-dim);font-size:.7rem;font-weight:500;letter-spacing:.3px}

/* Main CTA button */
.don-btn{width:100%;padding:14px;border-radius:14px;font-family:"Syne",sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;background:linear-gradient(135deg,rgba(244,114,182,.25),rgba(244,63,94,.2));border:1px solid rgba(244,114,182,.4);color:#f9a8d4;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.don-btn:hover:not(:disabled){background:linear-gradient(135deg,rgba(244,114,182,.35),rgba(244,63,94,.3));transform:translateY(-2px);box-shadow:0 8px 32px rgba(244,114,182,.2)}
.don-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.don-btn-spin{display:none;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Security note */
.don-secure{font-size:.68rem;color:var(--text-dim);display:flex;align-items:center;justify-content:center;gap:5px}
.don-secure svg{fill:var(--text-dim);flex-shrink:0}

/* Success toast */
.don-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#0b0b1e;border:1px solid rgba(34,211,238,.3);border-radius:100px;padding:10px 22px;font-size:.82rem;color:var(--accent-cyan);display:flex;align-items:center;gap:8px;z-index:300;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s;opacity:0;pointer-events:none;white-space:nowrap}
.don-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.don-toast svg{fill:var(--accent-cyan);flex-shrink:0}

@media(max-width:480px){
  .don-modal{padding:32px 22px 26px}
  .don-amounts{grid-template-columns:repeat(2,1fr)}
  .don-title{font-size:1.25rem}
}

/* ── Thank-you modal ── */
.ty-modal{border-color:rgba(34,211,238,.18)}
.ty-cups{font-size:3.2rem;margin-bottom:16px;animation:tyBounce 1s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tyBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.18) rotate(5deg)}80%{transform:scale(.92) rotate(-3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.ty-title{background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ty-sub{margin-bottom:16px}
.ty-amount{font-family:"Syne",sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:-1.5px;background:linear-gradient(135deg,#fbbf24,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:24px;min-height:2.8rem}
.ty-btn{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(34,211,238,.2));border-color:rgba(34,211,238,.35);color:var(--accent-cyan)}
.ty-btn:hover:not(:disabled){background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(34,211,238,.3));box-shadow:0 8px 32px rgba(34,211,238,.15)}

/* ══ ASCII ART CONVERTER ═════════════════════════════════════════════════════ */
#view-ascii{height:100vh;overflow:hidden}
.ascii-shell{flex:1;display:flex;min-height:0}

/* Left controls panel */
.ascii-ctrl{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;padding:24px 20px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border)}
.ascii-panel-title{font-family:"Syne",sans-serif;font-weight:700;font-size:1rem;color:var(--text)}

/* Drop zone */
.ascii-drop{border:1.5px dashed var(--border);border-radius:16px;padding:28px 16px;text-align:center;cursor:pointer;transition:border-color .25s,background .25s;display:flex;flex-direction:column;align-items:center;gap:6px}
.ascii-drop:hover,.ascii-drag{border-color:rgba(59,130,246,.45)!important;background:rgba(59,130,246,.05)}
.ascii-has-file{border-style:solid;border-color:rgba(59,130,246,.25)}
.ascii-drop-svg{width:36px;height:36px;fill:var(--text-dim);transition:fill .25s,opacity .25s}
.ascii-drop:hover .ascii-drop-svg{fill:var(--accent-violet)}
.ascii-drop-title{font-size:.82rem;font-weight:600;color:var(--text)}
.ascii-drop-hint{font-size:.72rem;color:var(--text-dim)}

/* Range slider */
.ascii-field{display:flex;flex-direction:column;gap:7px}
.ascii-range-row{display:flex;align-items:center;gap:8px}
.ascii-range{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.08);outline:none;cursor:pointer}
.ascii-range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent-violet);cursor:pointer;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.ascii-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent-violet);border:none;cursor:pointer}
.ascii-range-lim{font-size:.65rem;color:var(--text-dim);flex-shrink:0;width:2.2ch;text-align:center}

/* Toggles */
.ascii-toggles{display:flex;gap:14px;flex-wrap:wrap}
.ascii-tog{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:.82rem;color:var(--text-dim)}
.ascii-tog input{position:absolute;opacity:0;pointer-events:none}
.ascii-tog-track{width:32px;height:18px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid var(--border);position:relative;transition:background .2s,border-color .2s;flex-shrink:0}
.ascii-tog-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text-dim);transition:transform .2s,background .2s}
.ascii-tog input:checked~.ascii-tog-track{background:rgba(59,130,246,.25);border-color:rgba(59,130,246,.4)}
.ascii-tog input:checked~.ascii-tog-track .ascii-tog-thumb{transform:translateX(14px);background:var(--accent-violet)}
.ascii-tog-lbl{color:var(--text);transition:color .2s}

.ascii-hint{font-size:.65rem;color:var(--text-dim);margin-top:auto;text-align:center;opacity:.6}

/* Right output panel */
.ascii-output{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ascii-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-dim);padding:48px 24px}
.ascii-empty svg{width:48px;height:48px;fill:rgba(255,255,255,.06)}
.ascii-empty p{font-size:.9rem;font-weight:500}
.ascii-empty span{font-size:.75rem;text-align:center}
.ascii-result-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.ascii-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;gap:10px;flex-wrap:wrap}
.ascii-info{font-size:.72rem;color:var(--text-dim);font-family:monospace;letter-spacing:.5px}
.ascii-toolbar-btns{display:flex;gap:8px;flex-shrink:0}
.ascii-action-btn{font-size:.75rem;padding:6px 14px;gap:5px}
.ascii-pre-wrap{flex:1;overflow:auto;padding:16px}
#ascii-pre{font-family:"Cascadia Code","Fira Code","JetBrains Mono","Courier New",monospace;line-height:1.05;white-space:pre;color:var(--accent-cyan);letter-spacing:.02em;display:block}

@media(max-width:768px){
  #view-ascii{height:auto;min-height:100vh;overflow:auto}
  .ascii-shell{flex-direction:column}
  .ascii-ctrl{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:18px 16px}
  .ascii-output{min-height:320px}
  .ascii-pre-wrap{padding:12px}
}
@media(max-width:480px){
  .ascii-toolbar{padding:8px 12px}
  .ascii-toolbar-btns{gap:6px}
}