:root{
  --bg:#14282e;--panel:#1d3841;--panel-2:#24444e;--ink:#e9edeb;--dim:#9db6b5;
  --brass:#d9a05b;--line:rgba(233,237,235,.14);--danger:#c96f5e;--ok:#7fb98a;--radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding:24px 16px 80px}

.brand{font-family:Futura,"Century Gothic","Trebuchet MS",sans-serif;
  text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:18px;margin:0 0 4px}
.brand span{color:var(--brass)}
.tagline{color:var(--dim);font-size:13px;margin:0 0 20px;letter-spacing:.06em}
.display{font-family:Futura,"Century Gothic","Trebuchet MS",sans-serif;
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:14px;color:var(--brass);margin:0 0 14px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}

label{display:block;font-size:13px;color:var(--dim);margin-bottom:12px}
input{display:block;width:100%;margin-top:5px;padding:10px 12px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit}
input:focus{outline:2px solid var(--brass);outline-offset:1px}

.btn{width:100%;padding:11px 0;background:var(--brass);color:#241505;border:none;border-radius:999px;
  font:inherit;font-weight:700;cursor:pointer;margin-top:4px}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.small{width:auto;padding:6px 16px;font-size:12px;margin-top:0}
.btn:hover{filter:brightness(1.06)}

.tabs{display:flex;gap:8px;margin-bottom:18px}
.tabs button{flex:1;background:none;border:1px solid var(--line);color:var(--dim);padding:9px 0;
  border-radius:999px;font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.14em;cursor:pointer}
.tabs button.on{border-color:var(--brass);color:var(--brass)}

.msg{color:var(--danger);font-size:13px;margin:12px 0 0}
.msg.ok{color:var(--ok)}
.hidden{display:none}
.dim{color:var(--dim);font-size:14px}

.home-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.group{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.group-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.role{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--brass);
  border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.inv-out{margin-top:10px;font-size:14px}
code{background:var(--bg);border:1px solid var(--line);padding:2px 8px;border-radius:6px;
  color:var(--brass);font-family:"SF Mono",ui-monospace,Consolas,Menlo,monospace}

/* rader (klikkbare grupper/lister) */
.row{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:8px;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.row:hover{border-color:var(--brass)}

/* navigasjon */
.back{background:none;border:none;color:var(--brass);font:inherit;cursor:pointer;
  padding:0;margin:0 0 14px;font-size:14px}

/* plate-kort */
.prog{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.cover{display:block;width:180px;height:180px;object-fit:cover;border-radius:10px;
  margin:0 auto 14px;box-shadow:0 8px 24px rgba(0,0,0,.45);
  background:
    radial-gradient(circle at 50% 50%, #14282e 0 3%, transparent 3.5%),
    radial-gradient(circle at 50% 50%, #d9a05b 0 13%, transparent 13.5%),
    repeating-radial-gradient(circle at 50% 50%, #101014 0 2px, #17171c 2px 4px)}
.alb{font-size:16px;margin-top:4px}
.alb-row{display:flex;align-items:center;gap:12px}
.cover-sm{width:52px;height:52px;flex:none;object-fit:cover;border-radius:8px;
  background:
    radial-gradient(circle at 50% 50%, #14282e 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 50%, #d9a05b 0 15%, transparent 15.5%),
    repeating-radial-gradient(circle at 50% 50%, #101014 0 1px, #17171c 1px 2px)}
.alb .no{display:inline-block;min-width:26px;color:var(--brass);font-weight:700;margin-right:6px}
.doms{margin-top:12px}
.dom{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-top:1px solid var(--line)}
.dom .st,.mine .st{color:var(--brass);letter-spacing:2px;white-space:nowrap}
.rev{margin:2px 0 6px;font-size:13px}
.avg{color:var(--brass);font-size:13px;margin-left:8px;white-space:nowrap}
.artist-link{color:var(--brass);cursor:pointer;border-bottom:1px dotted rgba(217,160,91,.5)}
.artist-link:hover{border-bottom-style:solid}
.badges{text-align:right;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.badge{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.mine{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* dømming */
.rate{margin-top:16px}
.star-pick{font-size:30px;color:var(--brass);letter-spacing:6px;cursor:pointer;user-select:none;margin-bottom:10px}
.star-pick span{cursor:pointer}
textarea{display:block;width:100%;min-height:72px;padding:10px 12px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;resize:vertical;margin-bottom:12px}
textarea:focus{outline:2px solid var(--brass);outline-offset:1px}