/* v12.1 — adds Edit button + edit-mode visuals */

:root{
  --bg:#0b0b0c; --bg2:#121214; --card:#141519; --ink:#f1f3f5; --muted:#b6bcc6;
  --ring:rgba(255,255,255,.14);
  --glass:rgba(20,22,28,.58);
  --glass-green:rgba(34,197,94,.30);
  --glass-red:rgba(255,77,77,.30);
  --glass-gray:rgba(255,255,255,.12);
  --accent:hsl(210 90% 72%);
  --logo-size: clamp(1.6rem, 5vw, 3.1rem); /* change to make TYNKBAY bigger/smaller */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1400px 600px at 50% -300px,#121316 6%,#0b0b0c 60%);
  color:var(--ink); font-family:"Rubik Rounded",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  font-size:16px; line-height:1.38;
}
.hidden{display:none!important}

/* Header */
.hero{ position:relative; text-align:center; padding:1.2rem 1rem .3rem }
.hero .mark{ color:var(--accent); letter-spacing:.38rem; font-weight:900; font-size:var(--logo-size) }

/* Buttons */
.iconbtn{
  position:absolute; right:1rem; top:1rem; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center; border-radius:16px;
  border:1px solid var(--ring); background:rgba(255,255,255,.07); color:#fff; cursor:pointer; z-index:50;
}
.iconbtn.left{ left:1rem; right:auto }
.iconbtn.red{ background:var(--glass-red); border-color:rgba(255,99,99,.45) }
.iconbtn svg{ width:28px; height:28px; pointer-events:none }

/* Top nav */
.topnav{ display:flex; gap:.6rem; justify-content:center; margin:.5rem auto .5rem }
.navbtn{
  background:transparent; border:1px solid var(--ring); color:#c8cdd6;
  border-radius:14px; padding:.45rem .9rem; letter-spacing:.18rem; font-weight:900; cursor:pointer
}
.navbtn.active{
  color:#0b0b0c; background:var(--accent);
  border-color:color-mix(in oklab, var(--accent) 65%, #ffffff);
}

/* helper */
.foot{ opacity:.7; padding:.4rem 1rem 0; text-align:center }

/* Views */
.views-noswipe{ min-height:calc(100vh - 170px) }
.view.hidden{ display:none }
.view.current{ display:block }

/* Grid */
.wrap{ padding:1.25rem }
.apps-grid{
  display:grid; grid-template-columns:repeat(4, minmax(220px,1fr)); gap:1.1rem;
  max-width:1600px; margin:0 auto;
}
.card{
  position:relative; background:var(--card); border:1px solid var(--ring);
  border-radius:1.2rem; padding:1rem; min-height:210px; text-align:center; color:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 10px 28px rgba(0,0,0,.30);
  transition:transform .16s ease, border-color .16s ease;
  user-select:none; touch-action:none; text-decoration:none;
}
.card:hover{ transform:translateY(-2px); border-color:#ffffff85 }
.logo{ width:128px; height:128px; margin:.1rem auto .5rem; background:#0f1116; border-radius:1.1rem; border:1px solid var(--ring); overflow:hidden; display:flex; align-items:center; justify-content:center }
.logo img{ width:100%; height:100%; object-fit:contain }
.card h3{ margin:0; font-size:1.05rem; font-weight:800 }
.card.add{ border:2px dashed var(--ring); background:transparent }
.card.add .logo{ background:transparent; border:0 }

/* kebab visibility: only in edit mode */
.kebab{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05);
  display:none; align-items:center; justify-content:center; cursor:pointer; opacity:.9
}
body.edit .kebab{ display:flex }
.kebab::before{
  content:""; width:16px; height:16px; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/></svg>') center/contain no-repeat; background:rgba(255,255,255,.92); display:block
}
body.edit .apps-grid{ cursor:grab }

/* menu pop */
.menu-pop{ position:absolute; top:54px; right:10px; display:flex; gap:.5rem; padding:.6rem .7rem; border-radius:14px; border:1px solid var(--ring); background:rgba(0,0,0,.35); backdrop-filter:blur(10px) saturate(160%); z-index:6 }
.pill{ display:inline-flex; align-items:center; justify-content:center; padding:.55rem .85rem; border-radius:999px; font-weight:800; border:1px solid var(--ring); cursor:pointer }
.pill.red{ background:var(--glass-red); border-color:rgba(255,99,99,.40) }
.pill.gray{ background:var(--glass-gray) }

/* Sortable */
.sortable-chosen{ transform:scale(.98); box-shadow:0 12px 40px rgba(0,0,0,.5) }
.sortable-ghost{ opacity:.25 }

/* Modal sheet (unchanged) */
.modal{ position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:3.5rem 1rem 2rem; background:rgba(0,0,0,.35); backdrop-filter:saturate(160%) blur(10px); z-index:30 }
.modal.hidden{ display:none }
.sheet{ position:relative; width:min(720px,96vw); background:var(--glass); border:1px solid var(--ring); border-radius:1rem; padding:1rem 1rem 1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:visible }
.sheet-close{ position:absolute; right:-18px; top:-36px; width:46px; height:46px; border-radius:14px; border:1px solid rgba(255,99,99,.40); background:var(--glass-red); cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35) }
.sheet-close::before{ content:""; width:18px; height:18px; display:block; margin:auto; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>') center/contain no-repeat; background:#fff }
.lbl{ display:block; font-weight:900; letter-spacing:.25rem; color:#e2e5ea; margin:.1rem 0 .35rem }

.sheet input[type="text"],
.sheet input[type="search"],
.sheet input[type="url"],
#customUrl,#search{
  appearance:none; width:100%; border-radius:12px; border:1px solid var(--ring);
  background:rgba(255,255,255,.08); color:var(--ink); padding:.72rem .9rem; font-weight:800
}
.sheet input::placeholder{ color:#aeb4be }
.urlwrap{ display:flex; align-items:center; gap:.6rem }
.pill.plus{
  width:46px; height:46px; flex:0 0 46px; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--accent) 60%, #ffffff);
  background:color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.14));
  cursor:pointer; position:relative;
}
.pill.plus::before{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>') center/contain no-repeat; background:#fff }

/* Catalog & toggle */
.catalog{ max-height:58vh; overflow:auto; padding:.25rem; display:flex; flex-direction:column; gap:.5rem }
.item{ display:flex; align-items:center; gap:.8rem; background:rgba(255,255,255,.06); border:1px solid var(--ring); border-radius:.95rem; padding:.6rem .75rem }
.appicon{ width:36px; height:36px; border-radius:.6rem; border:1px solid var(--ring); background:#0f1116; overflow:hidden; display:flex; align-items:center; justify-content:center }
.appicon img{ width:100%; height:100%; object-fit:contain }
.item .name{ flex:1; font-weight:800 }

.switch{
  --w:52px; --h:30px; --p:3px;
  position:relative; width:var(--w); height:var(--h);
  border-radius:999px; background:rgba(255,255,255,.10); border:1px solid var(--ring);
  cursor:pointer; display:inline-flex; align-items:center; backdrop-filter:saturate(160%) blur(6px);
  transition:background .18s, border-color .18s;
}
.switch.on{
  background:color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.16));
  border-color:color-mix(in oklab, var(--accent) 70%, #ffffff);
}
.switch input{ display:none }
.switch .knob{
  position:absolute; top:50%; left:var(--p); width:calc(var(--h) - 2*var(--p)); height:calc(var(--h) - 2*var(--p));
  border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transform:translateY(-50%);
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.switch.on .knob{ transform:translate(calc(var(--w) - var(--h)),-50%) }

/* Lyrics */
.lyrics-page{ display:grid; place-items:center; padding:1rem }
.lyrics-wrap{ width:min(1100px,96vw) }
.lyrics-body{
  color:var(--accent); font-weight:900; font-size:2.35rem; line-height:1.58; text-align:center;
  white-space:pre-wrap; max-height:66vh; overflow:auto; scrollbar-width:none; text-shadow:0 1px 0 #000, 0 0 24px color-mix(in oklab, var(--accent) 30%, transparent);
}
.lyrics-body::-webkit-scrollbar{ width:0; height:0 }

/* Settings */
.settings-wrap{ display:grid; place-items:center; padding:1.2rem }
.settings-title{ letter-spacing:.32rem; font-weight:900; opacity:.95; margin:.2rem 0 1rem }
.settings-card.big{ width:min(760px,96vw); text-align:center; background:rgba(255,255,255,.08); border:1px solid var(--ring); border-radius:16px; padding:1.2rem }

/* Floater */
.floater{ position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:980px; background:rgba(20,22,28,.86); border:1px solid var(--ring); border-bottom:0; border-radius:16px 16px 0 0; backdrop-filter:saturate(180%) blur(10px); z-index:40 }
.floater-inner{ display:flex; align-items:center; gap:1rem; padding:.75rem 1rem }
#npCover{ width:56px; height:56px; border-radius:10px; border:1px solid var(--ring); background:#0f1116; object-fit:cover }
.np-text{ min-width:0; flex:1 }
.np-title{ font-weight:900 }
.np-artist{ color:#c3c8d1 }
.np-bar{ height:6px; background:rgba(255,255,255,.14); border-radius:999px; overflow:hidden; margin-top:.45rem; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35) }
#npProgFill{ height:100%; width:0%; background:var(--accent); box-shadow:0 0 20px color-mix(in oklab, var(--accent) 40%, transparent) }

.np-ctrls{ display:flex; align-items:center; gap:.4rem; margin-right:.35rem }
.ctrl{ width:44px; height:44px; border-radius:12px; border:1px solid var(--ring); background:rgba(255,255,255,.10); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer }
.ctrl.big{ width:52px; height:52px }

.btn{ background:rgba(255,255,255,.12); border:1px solid var(--ring); color:var(--ink); border-radius:.9rem; padding:.75rem 1.1rem; font-weight:900; cursor:pointer }
.btn.primary{ background:color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.16)); border-color:color-mix(in oklab, var(--accent) 70%, #ffffff) }
.btn.small{ padding:.55rem .9rem; border-radius:.8rem; font-size:.9rem }
.btn.disabled{ opacity:.5; pointer-events:none }