/* RJ's Card Studio — brand: logo gradient cyan → purple, Playfair display, Archivo UI. */
:root{
  --grad: linear-gradient(135deg, #38C9F2 0%, #5E7BE0 45%, #8A3FBF 100%);
  --grad-soft: linear-gradient(135deg, rgba(56,201,242,.14), rgba(138,63,191,.14));
  --bg:#F7F6FA; --fg:#1C1724; --muted:#6D6578; --line:#E0DCE8; --panel:#FFFFFF;
  --accent:#6B46C1; --cyan:#2BB8E6;
  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Playfair Display',Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15121B; --fg:#EDEAF3; --muted:#9C93AA; --line:#322C3E; --panel:#1E1927;
    --accent:#A685F0; --cyan:#4CC7EF;
  }
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--fg); font-family:var(--ui);
  font-size:15px; line-height:1.55; min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1; width:100%;}
.shell{
  max-width:1020px; margin:0 auto; width:100%;
  padding-left:max(18px, env(safe-area-inset-left, 0px));
  padding-right:max(18px, env(safe-area-inset-right, 0px));
}
a{color:var(--accent);}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.15; text-wrap:balance;}

/* top bar */
.site-top{border-bottom:1px solid var(--line); background:var(--panel);}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:10px;}
.logo{height:44px; width:auto; display:block;}
@media (prefers-color-scheme: dark){ .logo{background:#fff; border-radius:10px; padding:4px 8px;} }
.top-nav{display:flex; align-items:center; gap:16px;}
.top-nav a{color:var(--fg); text-decoration:none; font-weight:600; font-size:14px;}
.top-nav a.on{color:var(--accent);}
.inline-form{display:inline;}
.linkish{background:none; border:0; padding:0; color:var(--muted); font:inherit; font-weight:600; font-size:14px; cursor:pointer;}

/* buttons, forms, cards of UI */
.btn{
  display:inline-block; border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  background:var(--grad); color:#fff; font-family:var(--ui); font-weight:700; font-size:14.5px;
  padding:11px 22px;
}
.btn.ghost{background:none; border:1.5px solid var(--line); color:var(--fg); font-weight:600;}
.btn.small{padding:8px 16px; font-size:13.5px;}
.btn.danger{background:none; border:1.5px solid #C4453A; color:#C4453A;}
.btn:disabled{opacity:.6; cursor:default;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px;}
.field{display:flex; flex-direction:column; gap:5px; min-width:0;}
.field label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.field input, .field select{
  font-family:var(--ui); font-size:15px; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1 / -1;}
.err{color:#C4453A; font-weight:600; font-size:13.5px;}
.flash{
  margin-top:16px; border:1px solid var(--line); border-left:4px solid var(--cyan);
  background:var(--panel); border-radius:10px; padding:10px 14px; font-weight:600; font-size:14px;
}
.help{color:var(--muted); font-size:13px;}

/* landing */
.hero{padding-block:46px 30px; text-align:center;}
.hero h1{font-size:clamp(30px, 6vw, 48px); margin:0 0 12px;}
.hero h1 em{font-style:italic; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{max-width:56ch; margin:0 auto 22px; color:var(--muted); font-size:16.5px;}
.samples{display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:22px; padding-block:10px 40px;}
.sample{display:flex; flex-direction:column; gap:12px; min-width:0;}
.sample .pick{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.sample .tname{font-weight:700; font-size:14.5px;}
.sample-note{text-align:center; color:var(--muted); font-size:13px; padding-bottom:34px;}

/* the business card itself */
.bcard{
  border-radius:20px; padding:28px 26px 20px; display:flex; flex-direction:column; gap:16px;
  box-shadow:0 2px 6px rgba(20,10,40,.08), 0 18px 44px rgba(20,10,40,.14);
  min-width:0; position:relative; overflow:hidden;
  --bc-bg:#FFFFFF; --bc-ink:#1C1724; --bc-sub:#6D6578; --bc-line:#E6E2EE; --bc-chipbg:rgba(107,70,193,.08);
  background:var(--bc-bg); color:var(--bc-ink);
}
.bcard[data-t="aurora"]::before{
  content:""; position:absolute; inset:0 0 auto; height:7px; background:var(--grad);
}
.bcard[data-t="noir"]{--bc-bg:#161320; --bc-ink:#F2EFF7; --bc-sub:#A79DBA; --bc-line:#322B42; --bc-chipbg:rgba(166,133,240,.14);}
.bcard[data-t="noir"]::before{content:""; position:absolute; inset:auto 0 0; height:7px; background:var(--grad);}
.bcard[data-t="spectrum"]{--bc-bg:transparent; --bc-ink:#FFFFFF; --bc-sub:rgba(255,255,255,.78); --bc-line:rgba(255,255,255,.28); --bc-chipbg:rgba(255,255,255,.16); background:var(--grad);}
.bcard[data-t="slate"]{--bc-bg:#F4F3F0; --bc-ink:#211E1A; --bc-sub:#746D62; --bc-line:#DCD8CE; --bc-chipbg:rgba(33,30,26,.07);}
.bc-head{display:flex; align-items:center; gap:14px;}
.bc-mono{
  width:52px; height:52px; flex:0 0 auto; border:1px solid var(--bc-line); border-radius:14px;
  display:grid; place-items:center; font-family:var(--display); font-size:22px;
}
.bcard[data-t="aurora"] .bc-mono, .bcard[data-t="slate"] .bc-mono{background:var(--grad-soft);}
.bc-who{min-width:0;}
.bc-name{font-family:var(--display); font-weight:600; font-size:clamp(24px, 5vw, 30px); line-height:1.1; overflow-wrap:anywhere;}
.bc-role{color:var(--bc-sub); font-size:13.5px; margin-top:3px; overflow-wrap:anywhere;}
.bc-rule{border:0; border-top:1px solid var(--bc-line); margin:0;}
.bc-rows{display:flex; flex-direction:column; gap:9px;}
.bc-row{display:flex; align-items:baseline; gap:4px 12px; min-width:0; flex-wrap:wrap;}
.bc-lbl{flex:0 0 68px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bc-sub);}
.bc-val{min-width:0; overflow-wrap:break-word; font-size:14.5px;}
.bc-val a{color:inherit; text-decoration:underline; text-decoration-color:var(--bc-sub); text-underline-offset:3px;}
.bc-chips{display:flex; flex-wrap:wrap; gap:8px;}
.bc-chip{
  font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:999px;
  background:var(--bc-chipbg); color:var(--bc-ink); text-decoration:none; overflow-wrap:anywhere;
}
.bc-tag{font-family:var(--display); font-style:italic; font-size:16px; color:var(--bc-sub);}
.bc-brand{display:flex; justify-content:flex-end; margin-top:2px;}
.bc-brand img{height:22px; width:auto; opacity:.85; background:#fff; border-radius:6px; padding:2px 5px;}
.bcard[data-t="aurora"] .bc-brand img, .bcard[data-t="slate"] .bc-brand img{background:none; padding:0;}

/* auth pages */
.auth-wrap{max-width:430px; margin:40px auto; display:flex; flex-direction:column; gap:16px;}
.auth-wrap h1{font-size:28px; margin:0;}
.auth-wrap form{display:flex; flex-direction:column; gap:14px;}

/* editor */
.editor-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:start; padding-block:26px 40px;}
.editor-grid form{display:flex; flex-direction:column; gap:14px;}
.tpicker{display:flex; flex-wrap:wrap; gap:10px;}
.tpick{position:relative; cursor:pointer;}
.tpick input{position:absolute; opacity:0; inset:0;}
.tpick .tp{
  display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:999px;
  padding:7px 14px 7px 8px; font-size:13.5px; font-weight:600; background:var(--panel);
}
.tpick .dot{width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.15);}
.tpick input:checked + .tp{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.tpick input:focus-visible + .tp{outline:2px solid var(--accent); outline-offset:2px;}
.preview-col{position:sticky; top:18px; display:flex; flex-direction:column; gap:10px;}
.preview-col .help{text-align:center;}

/* card page */
.cardpage{max-width:520px; margin:0 auto; padding-block:30px 44px; display:flex; flex-direction:column; gap:18px;}
.cp-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.qr-wrap{display:none; flex-direction:column; align-items:center; gap:10px; padding:18px;}
.qr-wrap.open{display:flex;}
.qr-tile{background:#fff; padding:14px; border-radius:12px; line-height:0;}
.qr-tile img, .qr-tile canvas{display:block;}
.cp-cta{text-align:center; color:var(--muted); font-size:13.5px;}

/* dashboard */
.dash{display:flex; flex-direction:column; gap:22px; padding-block:26px 40px;}
.dash-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.dash h1{font-size:30px; margin:0;}
.dash h2{font-size:21px; margin:0 0 4px;}
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px;}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; min-width:0;}
.tile .k{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);}
.tile .v{font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px;}
.cardlist{display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:18px;}
.mycard{display:flex; flex-direction:column; gap:10px; min-width:0;}
.mycard .meta{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.mycard .views{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums;}
.mycard .acts{display:flex; gap:8px; flex-wrap:wrap;}
.tablebox{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow-x:auto;}
table.data{border-collapse:collapse; width:100%; font-size:14px; min-width:560px;}
table.data th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line);
}
table.data td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere;}
table.data tr:last-child td{border-bottom:0;}
table.data .num{font-variant-numeric:tabular-nums; text-align:right;}
.badge{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:1px 9px; color:var(--muted);}
.badge.admin{color:var(--accent); border-color:var(--accent);}

.site-foot{border-top:1px solid var(--line); margin-top:30px; padding-block:16px; color:var(--muted); font-size:13px;}

@media (max-width:760px){
  .editor-grid{grid-template-columns:1fr;}
  .preview-col{position:static;}
}
@media (max-width:480px){
  .form-grid{grid-template-columns:1fr;}
  .logo{height:36px;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }