/* Solco interface, rebuilt from the approved app-kit (dark graphite, violet accent).
   Scoped under .ui so the product can live inside the page at true scale. */

.ui {
  --bg-0:#0c0d0f; --bg-1:#131417; --bg-2:#1a1c20; --bg-3:#22252a; --bg-4:#2b2f35;
  --line-1:#24272c; --line-2:#33373e; --line-3:#474b53;
  --text-1:#eceae6; --text-2:#a9abb0; --text-3:#74777e; --text-4:#4d5057;
  --accent:#b9a3ff; --accent-ink:#17122b; --accent-soft:rgba(185,163,255,.13); --accent-line:rgba(185,163,255,.45);
  --ok:#4cc38a; --ok-soft:rgba(76,195,138,.13); --danger:#f0585e; --danger-soft:rgba(240,88,94,.13); --warn:#e8c14f;
  --wf-low:#3568f0; --wf-mid:#f09a4c; --wf-high:#f3eee4; --wf-bg:#0f1012; --wf-ruler:#0e0f11; --grid-rgb:255,255,255; --row-sel:#24232e; --stripe:rgba(255,255,255,.014);
  --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:14px;
  font-family:"Geist",system-ui,sans-serif; font-size:13px; line-height:18px; color:var(--text-1);
  font-feature-settings:"ss01"; -webkit-font-smoothing:antialiased; text-align:left;
  letter-spacing:0;
}
.ui * { box-sizing:border-box; }
.ui .tnum { font-variant-numeric:tabular-nums; }
.ui .mono { font-family:"Geist Mono",ui-monospace,monospace; font-size:12px; }
.ui .ttl-f { font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:600; letter-spacing:-.01em; }
.ui svg.i { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ui svg.i.s12 { width:12px; height:12px; } .ui svg.i.s14 { width:14px; height:14px; } .ui svg.i.s18 { width:18px; height:18px; } .ui svg.i.s20 { width:20px; height:20px; }
.ui svg.i.fill { fill:currentColor; stroke:none; }
.ui .muted { color:var(--text-3); } .ui .dim { color:var(--text-2); } .ui .accent { color:var(--accent); } .ui .ok { color:var(--ok); } .ui .danger { color:var(--danger); } .ui .warn { color:var(--warn); }
.ui .lbl11 { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }

/* window */
.ui.win { display:flex; background:var(--bg-1); overflow:hidden; position:relative; }
.ui .main { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }

/* sidebar */
.ui .side { width:236px; flex:none; background:var(--bg-1); border-right:1px solid var(--line-1); display:flex; flex-direction:column; padding:0 8px; }
.ui .side-top { height:48px; display:flex; align-items:center; gap:10px; padding:0 4px 0 6px; }
.ui .side-top .name { font-weight:600; font-size:14px; flex:1; }
.ui .nav { height:28px; display:flex; align-items:center; gap:10px; padding:0 8px; border-radius:var(--r-sm); color:var(--text-2); white-space:nowrap; }
.ui .nav .lbl { flex:1; overflow:hidden; text-overflow:ellipsis; }
.ui .nav .cnt { font-size:12px; color:var(--text-3); }
.ui .nav svg { color:var(--text-3); }
.ui .nav.sel { background:var(--bg-4); color:var(--text-1); }
.ui .sec { height:30px; display:flex; align-items:flex-end; padding:0 8px 6px; margin-top:10px; }
.ui .sec .t { flex:1; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
.ui .sec .aside { font-size:12px; color:var(--text-3); }
.ui .step { height:30px; display:flex; align-items:center; gap:10px; padding:0 8px; border-radius:var(--r-sm); color:var(--text-2); }
.ui .step .dot { width:20px; height:20px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--text-2); border:1px solid var(--text-4); transition:none; }
.ui .step.done .dot { border-color:transparent; color:var(--ok); }
.ui .step.next .dot { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.ui .step.next .lbl { color:var(--text-1); font-weight:550; }
.ui .step .lbl { flex:1; }
.ui .step .cnt { font-size:12px; color:var(--text-3); }
.ui .step.next .cnt { color:var(--accent); font-weight:600; }
.ui .step.sel { background:var(--bg-4); color:var(--text-1); }
.ui .side-foot { margin-top:auto; border-top:1px solid var(--line-1); padding:8px 0; }
.ui .activity { height:30px; display:flex; align-items:center; gap:10px; padding:0 8px; color:var(--text-2); font-size:12.5px; }
.ui .spin { width:14px; height:14px; border-radius:50%; border:1.6px solid var(--line-3); border-top-color:var(--text-1); flex:none; }

/* deck */
.ui .deck { background:var(--bg-2); border-bottom:1px solid var(--line-1); flex:none; }
.ui .deck-head { display:flex; align-items:center; gap:18px; padding:14px 20px 0; height:78px; }
.ui .art { width:60px; height:60px; border-radius:var(--r-md); background:var(--bg-3) center/cover; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.ui .tt { flex:1; min-width:0; }
.ui .tt .title { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:26px; line-height:32px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui .tt .meta { color:var(--text-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui .tt .meta .sep { color:var(--text-4); margin:0 6px; }
.ui .stats { display:flex; gap:26px; flex:none; }
.ui .stat .v { font-size:25px; line-height:32px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui .stat .v small { font-size:13px; color:var(--text-2); margin-left:5px; font-weight:400; letter-spacing:0; }
.ui .stat .k { font-size:11.5px; color:var(--text-3); }
.ui .deck-mid { display:flex; gap:0; padding:12px 20px 0; align-items:stretch; }
.ui .ov { position:relative; flex:1; height:64px; }
.ui canvas { display:block; }
.ui .ov canvas, .ui .zoom canvas { position:absolute; inset:0; width:100%; height:100%; }
.ui .charbox { width:300px; flex:none; margin-left:18px; padding-left:18px; border-left:1px solid var(--line-2); display:grid; grid-template-columns:1fr 1fr; column-gap:18px; row-gap:4px; align-content:center; }
.ui .cb { display:flex; align-items:center; gap:8px; font-size:11.5px; height:16px; }
.ui .cb .k { width:44px; color:var(--text-3); }
.ui .cb .bar { flex:1; height:4px; border-radius:2px; background:var(--bg-4); overflow:hidden; }
.ui .cb .bar i { display:block; height:100%; border-radius:2px; }
.ui .cb .n { width:22px; text-align:right; color:var(--text-2); font-variant-numeric:tabular-nums; }
.ui .zoom { position:relative; height:150px; margin-top:12px; background:var(--wf-bg); border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); }
.ui .tools { height:52px; display:flex; align-items:center; gap:6px; padding:0 16px 0 20px; }
.ui .tsep { width:1px; height:22px; background:var(--line-2); margin:0 8px; flex:none; }
.ui .btn { height:30px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; border-radius:var(--r-sm); background:var(--bg-3); color:var(--text-1); border:1px solid var(--line-2); font-size:13px; white-space:nowrap; flex:none; }
.ui .btn.sq { width:30px; padding:0; }
.ui .btn.ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.ui .btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.ui .btn.lg { height:36px; padding:0 16px; font-size:13.5px; border-radius:var(--r-md); }
.ui .btn.sm { height:24px; padding:0 8px; font-size:12px; }
.ui .btn.danger-o { background:transparent; color:var(--danger); border-color:rgba(240,88,94,.45); }
.ui .btn.on { background:var(--bg-4); border-color:var(--line-3); }
.ui .play { width:40px; height:40px; border-radius:20px; background:var(--text-1); color:var(--bg-1); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ui .pad { width:28px; height:28px; border-radius:var(--r-sm); background:var(--bg-3); border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--text-4); flex:none; }
.ui .pad.set { color:#15161a; border-color:transparent; }
.ui .seg { display:inline-flex; background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r-sm); height:30px; padding:2px; gap:2px; flex:none; }
.ui .seg > span { display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:0 8px; border-radius:3px; font-size:12.5px; color:var(--text-2); gap:6px; white-space:nowrap; }
.ui .seg > span.on { background:var(--bg-4); color:var(--text-1); box-shadow:0 0 0 1px var(--line-3); }
.ui .seg.big { height:36px; } .ui .seg.big > span { padding:0 14px; font-size:13.5px; }
.ui .seg > span.acc { background:var(--accent-soft); color:var(--accent); box-shadow:0 0 0 1px var(--accent-line); }

/* library */
.ui .lib-head { height:54px; display:flex; align-items:center; gap:14px; padding:0 16px 0 20px; flex:none; }
.ui .lib-head .ttl { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:23px; letter-spacing:-.01em; white-space:nowrap; }
.ui .lib-head .sub { color:var(--text-3); font-size:12.5px; white-space:nowrap; margin-top:3px; }
.ui .search { flex:1; min-width:0; height:34px; border-radius:var(--r-md); background:var(--bg-2); border:1px solid var(--line-2); display:flex; align-items:center; gap:6px; padding:0 8px 0 10px; overflow:hidden; position:relative; }
.ui .search > svg { color:var(--text-3); }
.ui .search.focus { border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.ui .chip { height:24px; display:inline-flex; align-items:center; gap:5px; padding:0 8px; border-radius:4px; background:var(--bg-3); border:1px solid var(--line-2); font-size:12.5px; color:var(--text-2); white-space:nowrap; flex:none; }
.ui .chip b { font-weight:550; color:var(--text-1); }
.ui .typing { white-space:pre; color:var(--text-1); font-family:"Geist Mono",monospace; font-size:12.5px; }
.ui .caret { display:inline-block; width:1.5px; height:16px; background:var(--accent); vertical-align:-3px; margin-left:1px; }
.ui .ghead { height:30px; display:flex; align-items:center; border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); color:var(--text-3); font-size:11.5px; font-weight:500; flex:none; }
.ui .row { height:26px; display:flex; align-items:center; position:relative; }
.ui .rows > .row:nth-child(even) { background:var(--stripe); }
.ui .row.sel { background:var(--row-sel); }
.ui .row.sel::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:0 2px 2px 0; background:var(--accent); }
.ui .row.playing .c-title { color:var(--accent); }
.ui .c { padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.ui .c.r { text-align:right; }
.ui .c-title { flex:1 1 0; min-width:0; }
.ui .c-artist { width:180px; color:var(--text-2); }
.ui .c-style { width:112px; color:var(--text-2); }
.ui .c-bpm { width:58px; text-align:right; }
.ui .c-key { width:56px; }
.ui .c-time { width:52px; text-align:right; color:var(--text-2); }
.ui .c-energy { width:88px; }
.ui .c-feel { width:100px; color:var(--text-2); }
.ui .c-num { width:52px; text-align:right; color:var(--text-2); }
.ui .key { display:inline-flex; align-items:center; gap:6px; }
.ui .key i { width:7px; height:7px; border-radius:4px; display:inline-block; }
.ui .meter { display:flex; align-items:center; gap:7px; }
.ui .meter .bar { width:40px; height:4px; border-radius:2px; background:var(--bg-4); overflow:hidden; }
.ui .meter .bar > i { display:block; height:100%; background:var(--text-2); border-radius:2px; }
.ui .feelg { display:inline-flex; align-items:center; gap:8px; }
.ui .feelg i { width:12px; height:12px; border-radius:3px; background:var(--bg-4); position:relative; display:inline-block; }
.ui .feelg i::after { content:""; position:absolute; width:3px; height:3px; border-radius:2px; background:var(--text-1); left:var(--fx); top:var(--fy); }

/* views */
.ui .vhead { height:64px; display:flex; align-items:center; gap:14px; padding:0 20px 0 24px; flex:none; }
.ui .vhead .ttl { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:27px; letter-spacing:-.012em; }
.ui .vhead .sub { color:var(--text-3); margin-top:5px; white-space:nowrap; }
.ui .panel { background:var(--bg-2); border-left:1px solid var(--line-2); display:flex; flex-direction:column; }
.ui .phead { height:56px; display:flex; align-items:center; gap:10px; padding:0 14px 0 20px; border-bottom:1px solid var(--line-1); flex:none; }
.ui .phead .ttl { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:22px; flex:1; letter-spacing:-.01em; }
.ui .iconbtn { width:28px; height:28px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; color:var(--text-3); flex:none; }
.ui .fld { display:grid; grid-template-columns:22px 86px 1fr 1fr; align-items:center; min-height:34px; border-bottom:1px solid var(--line-1); column-gap:10px; }
.ui .fld .k { color:var(--text-3); font-size:12.5px; }
.ui .fld .cur { color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; }
.ui .fld .cur s { text-decoration:none; background-image:linear-gradient(rgba(240,88,94,.75),rgba(240,88,94,.75)); background-repeat:no-repeat; background-position:0 55%; background-size:var(--strike,0%) 1px; }
.ui .fld .new { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui .fld .new mark { background:rgba(76,195,138,.16); color:var(--text-1); border-radius:3px; padding:1px 3px; }
.ui .cbx { width:15px; height:15px; border-radius:4px; border:1px solid var(--line-3); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ui .cbx.on { background:var(--text-1); border-color:var(--text-1); color:var(--bg-1); }
.ui .cbx.part { background:var(--text-1); border-color:var(--text-1); }
.ui .cbx.part::after { content:""; width:8px; height:2px; background:var(--bg-1); border-radius:1px; }
.ui .cbx svg { width:11px; height:11px; stroke-width:2.6; }
.ui .radio { width:16px; height:16px; border-radius:8px; border:1px solid var(--line-3); flex:none; display:inline-flex; align-items:center; justify-content:center; }
.ui .radio.on { border-color:var(--accent); }
.ui .radio.on::after { content:""; width:8px; height:8px; border-radius:4px; background:var(--accent); }
.ui .card { border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--bg-2); }
.ui .cand { border:1px solid var(--accent-line); border-radius:var(--r-lg); background:rgba(185,163,255,.06); padding:12px; display:flex; gap:12px; }
.ui .prog { height:6px; border-radius:3px; background:var(--bg-4); overflow:hidden; display:flex; }
.ui .prog > i { display:block; height:100%; }
.ui .tagk { font-size:11px; font-weight:600; letter-spacing:.04em; height:18px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; width:60px; flex:none; }
.ui .tagk.keep { background:var(--ok-soft); color:var(--ok); }
.ui .tagk.rm { background:var(--danger-soft); color:var(--danger); }
.ui .copy { height:30px; display:flex; align-items:center; gap:12px; padding:0 8px 0 4px; border-radius:var(--r-sm); overflow:hidden; }
.ui .copy .p { flex:1; min-width:0; font-family:"Geist Mono",monospace; font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui .copy .p b { font-weight:500; color:var(--text-1); }
.ui .copy .m { color:var(--text-3); font-size:12px; white-space:nowrap; }
.ui .msg-u { align-self:flex-end; max-width:320px; background:var(--bg-4); border-radius:12px 12px 4px 12px; padding:9px 12px; line-height:19px; }
.ui .msg-a { line-height:20px; }
.ui .toast { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:var(--bg-3); border:1px solid var(--line-3); border-radius:10px; padding:9px 14px; display:flex; align-items:center; gap:10px; box-shadow:0 18px 50px rgba(0,0,0,.55); white-space:nowrap; }
.ui .kbd { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:4px; border:1px solid var(--line-3); color:var(--text-3); font-size:11px; }
.ui .cursor { position:absolute; left:0; top:0; width:22px; height:22px; pointer-events:none; z-index:40; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ui .press { position:absolute; left:0; top:0; border-radius:50%; border:2px solid var(--accent); pointer-events:none; z-index:39; }

.ui .cbx:not(.on) svg { display:none; }
.still .ui .cursor, .still .ui .press { display:none; }

/* paper: the approved light look, same structure and accent family */
.ui.light { --bg-0:#e9e7e2; --bg-1:#f6f5f2; --bg-2:#ffffff; --bg-3:#eeece8; --bg-4:#e3e0da; --line-1:#e4e1db; --line-2:#d3cfc7; --line-3:#bdb9b1;
  --text-1:#1b1b1d; --text-2:#55575c; --text-3:#85878c; --text-4:#b4b5b8;
  --accent:#6a4fd8; --accent-ink:#ffffff; --accent-soft:rgba(106,79,216,.10); --accent-line:rgba(106,79,216,.42);
  --ok:#1f9c63; --danger:#d33a40;
  --wf-low:#2a5ae0; --wf-mid:#e3872f; --wf-high:#6d6a64; --wf-bg:#f1f0ec; --wf-ruler:#ecebe7; --grid-rgb:40,36,30; --row-sel:#ebe6f7; --stripe:rgba(0,0,0,.018); }
.ui.light .play { background:var(--text-1); color:var(--bg-2); }
.ui.light .pad.set { color:#fff; }

/* genre view */
.ui .chip.acc { background:var(--accent-soft); border-color:var(--accent-line); color:var(--text-1); }
.ui .chip.acc b { color:var(--text-1); }
.ui .gmark { background:rgba(76,195,138,.16); color:var(--text-1); border-radius:3px; padding:1px 5px; font-weight:550; }
.ui [data-old] s { text-decoration:none; background-image:linear-gradient(rgba(240,88,94,.8),rgba(240,88,94,.8)); background-repeat:no-repeat; background-position:0 55%; background-size:var(--strike,0%) 1.5px; }
.ui [data-st] { position:relative; }