/* NOUWA STUDIO — Stage 3 styles: Account/Billing + Media generation + Dark mode + Smart actions */

/* ============== ACCOUNT / BILLING / SETTINGS ============== */
.acc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start;}
.acc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 26px;}
.acc-card h3{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--ink3);text-transform:uppercase;margin:0 0 18px;}
.acc-profile{display:flex;align-items:center;gap:18px;}
.acc-profile .ava-lg{width:68px;height:68px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:600;flex:none;}
.acc-profile .info .nm{font-size:20px;font-weight:600;letter-spacing:-.008em;}
.acc-profile .info .em{font-size:13px;color:var(--ink3);margin-top:3px;}
.acc-profile .info .roles{display:flex;gap:7px;margin-top:9px;}
.acc-profile .info .role{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--indigo);background:var(--tint);padding:3px 9px;border-radius:5px;}
.acc-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;}
.acc-field{display:flex;flex-direction:column;gap:6px;}
.acc-field label{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink3);text-transform:uppercase;}
.acc-field input,.acc-field select{height:42px;border:1px solid var(--border2);border-radius:10px;padding:0 13px;font-size:13.5px;background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s;}
.acc-field input:focus,.acc-field select:focus{border-color:var(--violet);}
.acc-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);}
.acc-row:last-child{border-bottom:none;}
.acc-row .lbl{font-size:13.5px;font-weight:500;}
.acc-row .sd{font-size:11.5px;color:var(--ink3);margin-top:2px;}
.acc-row .ctrl{flex:none;}

/* credit gauge — hexagonal */
.cred-gauge{display:flex;align-items:center;gap:18px;}
.cred-hex{position:relative;width:130px;height:130px;flex:none;}
.cred-hex svg{width:100%;height:100%;display:block;}
.cred-hex .val{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:600;letter-spacing:-.014em;}
.cred-hex .val small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;margin-top:-1px;text-align:center;}
.cred-side .ttl{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;margin-bottom:8px;}
.cred-side .pn{font-size:24px;font-weight:600;letter-spacing:-.014em;}
.cred-side .pp{font-size:13px;color:var(--ink2);margin-top:5px;}
.cred-side .actions{display:flex;gap:8px;margin-top:14px;}
.cred-spark{margin-top:18px;display:flex;align-items:end;gap:4px;height:54px;}
.cred-spark i{flex:1;background:var(--grad);border-radius:3px;opacity:.7;}
.cred-spark-lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink3);margin-top:6px;}

/* payment methods */
.pay-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:11px;background:var(--canvas);margin-bottom:9px;}
.pay-row .brand{width:38px;height:26px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;}
.pay-row .brand.visa{background:#1A1F71;}
.pay-row .brand.mc{background:linear-gradient(90deg,#EB001B 50%,#F79E1B 50%);}
.pay-row .brand.mada{background:#0F766E;}
.pay-row .last{font-size:13px;font-weight:600;font-feature-settings:"tnum";}
.pay-row .exp{font-size:11.5px;color:var(--ink3);}
.pay-row .def{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--teal);background:var(--teal-tint);padding:2px 7px;border-radius:5px;text-transform:uppercase;margin-inline-start:auto;}

/* invoices */
.inv-table{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:11px;overflow:hidden;}
.inv-row{display:grid;grid-template-columns:90px 1fr 80px 100px 80px;gap:14px;align-items:center;padding:13px 18px;font-size:13px;border-bottom:1px solid var(--border);background:var(--surface);}
.inv-row:last-child{border-bottom:none;}
.inv-row.head{background:var(--canvas);font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;}
.inv-row .num{text-align:end;font-feature-settings:"tnum";}
.inv-row .st{font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;width:max-content;}
.inv-row .st.paid{background:var(--teal-tint);color:var(--teal);}
.inv-row .st.pend{background:rgba(217,119,6,.12);color:#B45309;}

/* theme switch */
.theme-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.theme-card{padding:14px;border-radius:11px;border:2px solid var(--border);cursor:pointer;background:var(--surface);transition:all .15s;}
.theme-card:hover{border-color:var(--border2);}
.theme-card.active{border-color:var(--violet);background:var(--tint);}
.theme-card .preview{height:60px;border-radius:7px;margin-bottom:10px;position:relative;overflow:hidden;}
.theme-card .preview.light{background:linear-gradient(135deg,#FFFFFF 0%,#F5F3FD 100%);border:1px solid var(--border);}
.theme-card .preview.dark{background:linear-gradient(135deg,#0F0E26 0%,#17153A 100%);}
.theme-card .preview.system{background:linear-gradient(90deg,#FFFFFF 50%,#0F0E26 50%);}
.theme-card .nm{font-size:12.5px;font-weight:600;}

/* ============== MEDIA GENERATION ============== */
.media{display:flex;flex-direction:column;height:100%;flex:1;min-width:0;}
.media-prompt-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:18px 28px;}
.media-prompt-row{display:flex;gap:12px;align-items:center;max-width:980px;margin:0 auto;}
.media-prompt-input{flex:1;height:54px;border:1px solid var(--border2);border-radius:14px;padding:0 18px;font-size:14.5px;background:var(--surface);outline:none;transition:border-color .15s;color:var(--ink);}
.media-prompt-input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,58,237,.10);}
.media-generate{height:54px;padding:0 24px;border-radius:14px;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:9px;}
.media-controls{display:flex;align-items:center;gap:8px;margin-top:14px;max-width:980px;margin-inline:auto;flex-wrap:wrap;}
.media-control{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:12px;color:var(--ink2);font-weight:500;cursor:pointer;}
.media-control:hover{border-color:var(--border2);color:var(--ink);}
.media-control.active{background:var(--tint);border-color:var(--violet);color:var(--indigo);}
.media-control select{border:none;background:transparent;font-size:12px;color:inherit;font-weight:500;outline:none;}

.media-body{flex:1;display:flex;min-height:0;}
.media-canvas{flex:1;background:var(--canvas);overflow-y:auto;padding:28px;position:relative;}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:880px;margin:0 auto;}
.media-tile{aspect-ratio:1/1;border-radius:14px;background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;}
.media-tile:hover{border-color:var(--border2);box-shadow:var(--shadow-l);transform:translateY(-3px);}
.media-tile.selected{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,58,237,.18);}
.media-tile .img{flex:1;background-size:cover;background-position:center;position:relative;}
.media-tile.gen .img{background:linear-gradient(135deg,#E2D8FA 0%,#C4B5FD 50%,#A78BFA 100%);}
.media-tile.gen-2 .img{background:linear-gradient(135deg,#FED7AA 0%,#FB923C 50%,#C2410C 100%);}
.media-tile.gen-3 .img{background:linear-gradient(135deg,#3F2515 0%,#8B5A3C 60%,#D4A574 100%);}
.media-tile.gen-4 .img{background:linear-gradient(135deg,#1E1B4B 0%,#312E81 50%,#7C3AED 100%);}
.media-tile .img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 60%);}
.media-tile.loading .img{background:linear-gradient(90deg,var(--tint2) 25%,var(--tint) 50%,var(--tint2) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;}
.media-tile.loading::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);animation:redring 1.5s ease-out infinite;}
.media-tile-foot{height:38px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--surface);border-top:1px solid var(--border);font-size:11px;color:var(--ink3);}
.media-tile-foot .vmark{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--ink2);}
.media-tile-foot .spc{flex:1;}
.media-tile-act{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink3);cursor:pointer;}
.media-tile-act:hover{background:var(--tint);color:var(--indigo);}

.media-side{width:340px;flex:none;border-inline-start:1px solid var(--border);background:var(--surface);padding:24px;overflow-y:auto;}
.media-side h4{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;margin:0 0 14px;}
.media-side .preview-box{aspect-ratio:1/1;border-radius:12px;background:linear-gradient(135deg,#3F2515 0%,#8B5A3C 60%,#D4A574 100%);position:relative;overflow:hidden;margin-bottom:18px;}
.media-side .preview-box::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 60%);}
.media-side .pn-block{margin-bottom:18px;}
.media-side .pn-block .lbl{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;margin-bottom:6px;}
.media-side .pn-block .v{font-size:13px;color:var(--ink);line-height:1.5;}
.media-side .actions{display:flex;flex-direction:column;gap:8px;}
.media-side .actions .btn{justify-content:flex-start;}

.media-history{height:90px;flex:none;background:var(--surface);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;padding:14px 20px;overflow-x:auto;}
.media-history .h-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;flex:none;}
.media-hist-thumb{width:62px;height:62px;border-radius:8px;flex:none;background-size:cover;background-position:center;cursor:pointer;border:1px solid var(--border);position:relative;}
.media-hist-thumb:hover{border-color:var(--border2);}
.media-hist-thumb.h-1{background:linear-gradient(135deg,#D4A574 0%,#8B5A3C 100%);}
.media-hist-thumb.h-2{background:linear-gradient(135deg,#A78BFA 0%,#7C3AED 100%);}
.media-hist-thumb.h-3{background:linear-gradient(135deg,#FB923C 0%,#C2410C 100%);}
.media-hist-thumb.h-4{background:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);}
.media-hist-thumb.h-5{background:linear-gradient(135deg,#1E1B4B 0%,#7C3AED 100%);}
.media-hist-thumb.h-6{background:linear-gradient(135deg,#F4504C 0%,#B91C1C 100%);}
.media-hist-thumb.h-7{background:linear-gradient(135deg,#F5F3FD 0%,#A78BFA 100%);}

/* ============== INLINE AI SMART ACTIONS ============== */
.smart-toolbar{position:absolute;z-index:20;display:inline-flex;align-items:center;gap:2px;background:var(--ink);
  color:#fff;border-radius:10px;padding:5px 6px;box-shadow:0 12px 36px rgba(23,21,58,.32);
  animation:ghostin .2s both;}
.smart-toolbar::before{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;background:var(--ink);}
.smart-act{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;font-size:12px;
  font-weight:500;color:rgba(255,255,255,.85);cursor:pointer;white-space:nowrap;}
.smart-act:hover{background:rgba(255,255,255,.10);color:#fff;}
.smart-act .rednode{margin-inline-end:2px;}
.smart-act-sep{width:1px;height:18px;background:rgba(255,255,255,.18);margin:0 3px;}

.smart-diff{margin:14px 0;border:1px solid var(--violet);border-radius:11px;padding:14px 18px;background:var(--tint);
  animation:ghostin .25s both;}
.smart-diff .h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--indigo);text-transform:uppercase;margin-bottom:10px;}
.smart-diff .h .spc{flex:1;}
.smart-diff .old{font-size:13.5px;color:var(--ink3);text-decoration:line-through;margin-bottom:8px;line-height:1.6;}
.smart-diff .new{font-size:13.5px;color:var(--indigo);font-weight:500;margin-bottom:14px;line-height:1.65;}
.smart-diff .acts{display:flex;gap:8px;}
.smart-diff .btn{padding:7px 14px;font-size:12.5px;}
.smart-diff .btn-accept{background:var(--ink);color:#fff;}
.smart-diff .btn-accept:hover{background:var(--indigo);}
.smart-diff .btn-reject{border:1px solid var(--border2);background:var(--surface);color:var(--ink2);}
.smart-diff .btn-reject:hover{border-color:var(--border2);color:var(--ink);}

/* ============== DARK MODE ============== */
.theme-dark{
  --canvas:#0F0E26;
  --surface:#17153A;
  --ink:#FAFAFA;
  --ink2:rgba(250,250,250,.74);
  --ink3:rgba(250,250,250,.46);
  --border:rgba(250,250,250,.08);
  --border2:rgba(250,250,250,.16);
  --tint:rgba(124,58,237,.12);
  --tint2:rgba(124,58,237,.20);
  --teal-tint:rgba(14,148,132,.18);
  --shadow-s:0 1px 2px rgba(0,0,0,.5);
  --shadow-m:0 4px 18px rgba(0,0,0,.45);
  --shadow-l:0 18px 56px rgba(0,0,0,.55);
}
.theme-dark body,.theme-dark.app-stage,.theme-dark .frame{background:#0A0920;color:var(--ink);}
.theme-dark .sidebar{background:var(--surface);border-color:var(--border);}
.theme-dark .utilbar,.theme-dark .topbar{background:transparent;border-color:var(--border);}
.theme-dark .onebox{background:#1B1846;border-color:var(--border2);}
.theme-dark .onebox textarea{color:var(--ink);}
.theme-dark .chip{background:#1B1846;color:var(--ink2);border-color:var(--border2);}
.theme-dark .chip:hover{color:var(--ink);border-color:var(--violet);}
.theme-dark .chip.active{background:rgba(124,58,237,.22);color:#C4B5FD;}
.theme-dark .m-card,.theme-dark .pack-card,.theme-dark .brief-card,
.theme-dark .ptask-card,.theme-dark .net-card,
.theme-dark .doc,.theme-dark .deliv,.theme-dark .acc-card,
.theme-dark .lib-output,.theme-dark .tpl-card,.theme-dark .mission-row,
.theme-dark .price-card,.theme-dark .growth-panel{background:var(--surface);border-color:var(--border);}
.theme-dark .m-thumb,.theme-dark .tier,.theme-dark .pay-row,
.theme-dark .lib-preview,.theme-dark .deliv-band,
.theme-dark .acc-row,.theme-dark .prop-cover{background:#1B1846;border-color:var(--border);}
.theme-dark .sb-credit{background:#1B1846;border-color:var(--border);}
.theme-dark .util-search,.theme-dark .util-search .k{background:#1B1846;border-color:var(--border2);}
.theme-dark .btn-ghost{background:#1B1846;border-color:var(--border2);color:var(--ink2);}
.theme-dark .btn-ghost:hover{background:#1B1846;border-color:var(--violet);color:var(--ink);}
.theme-dark .sb-item:hover{background:rgba(124,58,237,.10);color:var(--ink);}
.theme-dark .sb-item.active{background:rgba(124,58,237,.18);color:#C4B5FD;}
.theme-dark .pillar-bar{background:#1B1846;border-color:var(--border);}
.theme-dark .pillar-tab{color:var(--ink2);}
.theme-dark .pillar-tab .ico{background:#0F0E26;color:var(--ink2);}
.theme-dark .mission-type{background:#1B1846;border-color:var(--border);color:var(--ink2);}
.theme-dark .mission-type.active{background:rgba(124,58,237,.22);border-color:var(--violet);color:#C4B5FD;}
.theme-dark .mission-type .badge{background:var(--tint);color:#A78BFA;}
.theme-dark .ws-canvas{background:#0A0920;}
.theme-dark .ws-plan{background:var(--surface);}
.theme-dark .ws-chat{background:var(--surface);}
.theme-dark .swatch{border-color:rgba(255,255,255,.05);}
.theme-dark .cta-band{background:#1B1846;}
.theme-dark .enrich-card{background:var(--surface);border-color:var(--border);}
.theme-dark .route-chip{background:#1B1846;border-color:var(--border);}
.theme-dark .ex-chip{border-color:var(--border2);}
.theme-dark .skel{border-color:var(--border2);}
.theme-dark .brandread,.theme-dark .brand-bio,.theme-dark .qr-card,
.theme-dark .pub-url{background:#1B1846;border-color:var(--border2);}
.theme-dark .bpill{background:var(--surface);border-color:var(--border);}
.theme-dark .pub-url .copybtn{background:#1B1846;border-color:var(--border2);}
.theme-dark .page-tab.active{background:var(--violet);}
.theme-dark .media-canvas{background:#0A0920;}
.theme-dark .media-prompt-bar{background:var(--surface);}
.theme-dark .media-side{background:var(--surface);}
.theme-dark .media-history{background:var(--surface);}
.theme-dark .smart-toolbar{background:var(--violet);}
.theme-dark .smart-toolbar::before{background:var(--violet);}
.theme-dark .voice-line{background:#1B1846;}
.theme-dark .brand-voice-sample{background:#1B1846;}
.theme-dark .voice-attr{background:var(--tint);}
.theme-dark .stage{background:#0A0920;}
.theme-dark .doc-cta-pill,.theme-dark .grad-cta{box-shadow:0 4px 24px rgba(124,58,237,.35);}
.theme-dark .grad-text em{color:var(--ink);}