/* NOUWA STUDIO — Stage 4 signature features
   Brand DNA Constellation · Studio Dashboard · AI Concierge · NOUWA Score    */

/* ================== BRAND DNA CONSTELLATION ================== */
.dna-stage{position:relative;flex:1;display:flex;flex-direction:column;background:
  radial-gradient(1200px 760px at 50% 40%,rgba(124,58,237,.10),transparent 70%),var(--canvas);
  overflow:hidden;}
.dna-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 18% 20%,rgba(244,80,76,.06),transparent 38%),
  radial-gradient(circle at 82% 78%,rgba(67,56,202,.08),transparent 42%);}
.dna-top{display:flex;align-items:center;gap:14px;padding:26px 32px 0;position:relative;z-index:2;}
.dna-top h1{font-size:28px;font-weight:600;letter-spacing:-.018em;margin:0;}
.dna-top h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.dna-meta{display:flex;gap:18px;align-items:center;font-size:11.5px;color:var(--ink3);margin-top:6px;}
.dna-meta .kv{display:inline-flex;align-items:center;gap:7px;}
.dna-meta .kv b{color:var(--ink);font-weight:600;}
.dna-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--ink3);}

.dna-canvas{flex:1;position:relative;display:grid;place-items:center;min-height:0;z-index:1;}
.dna-svg{width:min(820px,90%);aspect-ratio:1/1;display:block;}
.dna-svg .ring{fill:none;}
.dna-svg .node{transition:transform .25s ease;cursor:pointer;}
.dna-svg .node:hover{transform:scale(1.18);transform-origin:center;}
.dna-svg .nodeLabel{font-family:Inter,Tajawal;font-size:9.5px;font-weight:600;
  letter-spacing:.05em;fill:var(--ink2);text-anchor:middle;}
.dna-svg .nodeLabel.dim{fill:var(--ink3);opacity:.62;}
.dna-svg .wire{fill:none;stroke:rgba(124,58,237,.22);stroke-width:1;}
.dna-svg .wire.active{stroke:rgba(124,58,237,.62);stroke-width:1.6;}
.dna-svg .wire.thinking{stroke:var(--red);stroke-width:1.6;animation:dna-pulse 1.8s ease-in-out infinite;}
@keyframes dna-pulse{0%,100%{opacity:.3;}50%{opacity:.9;}}
.dna-svg .center-hex{filter:drop-shadow(0 16px 40px rgba(67,56,202,.32));}
.dna-svg .orbit{fill:none;stroke:rgba(67,56,202,.10);stroke-width:1;stroke-dasharray:2 5;}

.dna-floats{position:absolute;inset:0;pointer-events:none;}
.dna-card{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:11px 14px;box-shadow:var(--shadow-m);max-width:230px;font-size:12px;color:var(--ink2);
  animation:ghostin .5s both;}
.dna-card .h{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;}
.dna-card .h .dot{width:6px;height:6px;border-radius:50%;}
.dna-card .v{font-size:13px;color:var(--ink);font-weight:600;line-height:1.35;}
.dna-card .sub{font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.45;}
.dna-card.tl{top:10%;inset-inline-start:6%;}
.dna-card.tr{top:14%;inset-inline-end:6%;}
.dna-card.bl{bottom:18%;inset-inline-start:7%;}
.dna-card.br{bottom:12%;inset-inline-end:6%;}

.dna-foot{display:flex;align-items:center;gap:14px;padding:18px 32px;background:var(--surface);
  border-top:1px solid var(--border);position:relative;z-index:2;}
.dna-foot .legend{display:flex;gap:14px;}
.dna-foot .lg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);}
.dna-foot .lg .sw{width:9px;height:9px;border-radius:3px;}
.dna-foot .sp{flex:1;}
.dna-foot .stat{font-size:11.5px;color:var(--ink3);}
.dna-foot .stat b{color:var(--ink);font-weight:600;}

/* ================== STUDIO DASHBOARD ================== */
.studio-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;
  position:relative;overflow:hidden;}
.kpi .lbl{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;}
.kpi .v{font-size:34px;font-weight:600;letter-spacing:-.022em;line-height:1;margin-top:8px;font-feature-settings:"tnum";}
.kpi .delta{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:11.5px;font-weight:600;}
.kpi .delta.up{color:var(--teal);}
.kpi .delta.down{color:var(--red);}
.kpi .spk{position:absolute;right:18px;top:18px;display:flex;align-items:end;gap:3px;height:36px;opacity:.7;}
.kpi .spk i{width:5px;background:var(--grad);border-radius:2px;}
.frame[dir="rtl"] .kpi .spk{right:auto;left:18px;}

.studio-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}
.studio-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 26px;}
.studio-card h3{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;
  margin:0 0 18px;display:flex;align-items:center;gap:9px;}
.studio-card h3 .live{font-size:9.5px;color:var(--red);background:rgba(244,80,76,.10);
  padding:2px 7px;border-radius:5px;letter-spacing:.1em;}

.activity-stream{display:flex;flex-direction:column;gap:10px;}
.activity{display:flex;gap:12px;padding:11px 13px;border-radius:10px;background:var(--canvas);
  border:1px solid var(--border);}
.activity .mk{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;}
.activity .mk.publish{background:var(--tint2);color:var(--indigo);}
.activity .mk.growth{background:var(--teal-tint);color:var(--teal);}
.activity .mk.warn{background:rgba(244,80,76,.10);color:var(--red);}
.activity .mk.gen{background:var(--tint);color:var(--violet);}
.activity .body .t{font-size:13px;font-weight:500;line-height:1.4;}
.activity .body .t b{font-weight:600;}
.activity .body .when{font-size:11px;color:var(--ink3);margin-top:3px;}
.activity .body .when.live{color:var(--red);font-weight:600;}

.calendar{display:flex;flex-direction:column;gap:9px;}
.cal-row{display:grid;grid-template-columns:54px 90px 1fr 60px;gap:12px;align-items:center;
  padding:10px 14px;background:var(--canvas);border:1px solid var(--border);border-radius:10px;}
.cal-row .day{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink2);text-transform:uppercase;}
.cal-row .ch{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--indigo);
  background:var(--tint);padding:3px 9px;border-radius:5px;width:max-content;}
.cal-row .t{font-size:12.5px;color:var(--ink2);line-height:1.4;}
.cal-row .when{font-size:10.5px;color:var(--ink3);justify-self:end;font-feature-settings:"tnum";}

.notice-card{background:linear-gradient(140deg,#FFFFFF 0%,#F5F3FD 60%);border:1px solid var(--border);
  border-radius:16px;padding:24px 26px;position:relative;overflow:hidden;}
.notice-card .stamp{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.16em;color:var(--indigo);text-transform:uppercase;margin-bottom:14px;}
.notice-card .stamp .pulse{width:7px;height:7px;border-radius:50%;background:var(--red);}
.notice-card h2{font-size:18px;font-weight:600;letter-spacing:-.012em;line-height:1.35;margin:0 0 12px;}
.notice-card p{font-size:13.5px;color:var(--ink2);line-height:1.65;margin:0 0 16px;}
.notice-card .insights{display:flex;flex-direction:column;gap:8px;}
.notice-card .insight{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink2);}
.notice-card .insight .num{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--indigo);
  background:var(--tint2);padding:2px 7px;border-radius:5px;flex:none;margin-top:1px;}

.studio-traffic{height:200px;background:var(--canvas);border-radius:10px;border:1px solid var(--border);
  padding:14px 18px;display:flex;flex-direction:column;}
.studio-traffic .ttl{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.studio-traffic .ttl .nm{font-size:13.5px;font-weight:600;}
.studio-traffic .ttl .v{font-size:11.5px;color:var(--ink3);font-feature-settings:"tnum";}
.studio-traffic svg{flex:1;width:100%;}

/* ================== AI CONCIERGE WIDGET ================== */
.concierge{position:fixed;bottom:22px;inset-inline-end:22px;z-index:30;}
.concierge-btn{width:62px;height:62px;border-radius:50%;background:var(--surface);border:1px solid var(--border2);
  box-shadow:0 18px 48px rgba(67,56,202,.22);display:grid;place-items:center;cursor:pointer;
  position:relative;transition:all .2s;}
.concierge-btn:hover{transform:translateY(-2px);box-shadow:0 22px 56px rgba(67,56,202,.28);}
.concierge-btn .badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;
  border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;padding:0 6px;box-shadow:0 0 0 3px var(--canvas);}
.concierge-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--red);
  opacity:0;animation:cgring 2.4s ease-out infinite;}
@keyframes cgring{0%{transform:scale(.9);opacity:.55;}90%{transform:scale(1.25);opacity:0;}100%{opacity:0;}}

.concierge-panel{position:fixed;bottom:96px;inset-inline-end:22px;width:360px;background:var(--surface);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 80px rgba(23,21,58,.24);
  overflow:hidden;animation:ghostin .25s both;}
.concierge-h{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.concierge-h .av{width:36px;height:36px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none;}
.concierge-h .ttl{font-size:14px;font-weight:600;line-height:1.2;}
.concierge-h .sd{font-size:11.5px;color:var(--ink3);margin-top:2px;display:inline-flex;align-items:center;gap:6px;}
.concierge-h .sd .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);}
.concierge-h .spc{flex:1;}
.concierge-h .x{color:var(--ink3);padding:6px;border-radius:7px;}
.concierge-h .x:hover{background:var(--tint);color:var(--ink);}

.concierge-list{padding:6px 8px;max-height:380px;overflow-y:auto;}
.cg-item{display:flex;gap:11px;padding:10px 12px;border-radius:10px;transition:background .15s;cursor:pointer;}
.cg-item:hover{background:var(--tint);}
.cg-item .mk{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:12px;}
.cg-item .mk.live{background:rgba(244,80,76,.12);color:var(--red);position:relative;}
.cg-item .mk.live::after{content:"";position:absolute;inset:0;border-radius:8px;border:1.5px solid var(--red);
  animation:cgring 2s ease-out infinite;}
.cg-item .mk.done{background:var(--teal-tint);color:var(--teal);}
.cg-item .mk.queue{background:var(--tint2);color:var(--indigo);}
.cg-item .body .t{font-size:13px;font-weight:500;line-height:1.4;}
.cg-item .body .sd{font-size:11px;color:var(--ink3);margin-top:2px;}

.concierge-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;align-items:center;gap:9px;}
.concierge-foot .sgg{font-size:11.5px;color:var(--ink2);}
.concierge-foot .sgg b{color:var(--ink);font-weight:600;}
.concierge-foot .spc{flex:1;}
.concierge-foot .ask{font-size:11.5px;font-weight:600;color:var(--indigo);}

/* ================== NOUWA SCORE RADAR ================== */
.score-card{margin-top:34px;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;max-width:780px;
  margin-inline:auto;box-shadow:var(--shadow-s);}
.score-radar{position:relative;width:200px;height:200px;flex:none;}
.score-radar svg{width:100%;height:100%;display:block;}
.score-radar .ring{fill:none;stroke:var(--border2);stroke-width:1;}
.score-radar .area{fill:rgba(124,58,237,.18);stroke:var(--violet);stroke-width:2;stroke-linejoin:round;}
.score-radar .axis{stroke:var(--border2);stroke-width:1;}
.score-radar .label{font-size:9px;font-weight:600;letter-spacing:.06em;fill:var(--ink3);text-transform:uppercase;}
.score-side .lbl{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--ink3);text-transform:uppercase;margin-bottom:8px;}
.score-side .v{font-size:62px;font-weight:600;letter-spacing:-.030em;line-height:.95;font-feature-settings:"tnum";}
.score-side .v small{font-size:18px;font-weight:500;color:var(--ink3);}
.score-side .grade{display:inline-flex;align-items:center;gap:7px;background:var(--tint);color:var(--indigo);
  padding:5px 12px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:10px;}
.score-side .sub{font-size:13px;color:var(--ink2);margin-top:14px;line-height:1.55;max-width:380px;}
.score-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
.score-axis{padding:9px 12px;background:var(--canvas);border:1px solid var(--border);border-radius:8px;}
.score-axis .ax{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;}
.score-axis .ax-v{font-size:15px;font-weight:600;margin-top:3px;}
.score-axis .ax-v b{color:var(--violet);}

/* ================== DARK MODE OVERRIDES FOR STAGE 4 ================== */
.theme-dark .kpi,.theme-dark .studio-card,.theme-dark .dna-card,
.theme-dark .concierge-btn,.theme-dark .concierge-panel,
.theme-dark .score-card{background:var(--surface);border-color:var(--border);}
.theme-dark .activity,.theme-dark .cal-row,.theme-dark .score-axis{background:#1B1846;border-color:var(--border);}
.theme-dark .notice-card{background:linear-gradient(140deg,#17153A 0%,#1B1846 100%);border-color:var(--border);}
.theme-dark .studio-traffic{background:#1B1846;border-color:var(--border);}
.theme-dark .dna-stage{background:radial-gradient(1200px 760px at 50% 40%,rgba(124,58,237,.18),transparent 70%),#0A0920;}
.theme-dark .dna-svg .label{fill:var(--ink2);}
.theme-dark .score-radar .ring,.theme-dark .score-radar .axis{stroke:rgba(255,255,255,.10);}