:root{
  --bg:#f3f5f7;
  --panel:#ffffff;
  --panel-soft:#fafbfc;
  --line:#e4e7eb;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#58787f;
  --brand-strong:#45646a;
  --brand-soft:#edf3f4;
  --accent:#8fb651;
  --accent-soft:#eef6e0;
  --danger:#b2554a;
  --danger-soft:#fff2f0;
  --warning:#b9852f;
  --shadow:0 10px 24px rgba(17,24,39,.06);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:"Nirmala UI","Segoe UI","Tahoma","Arial",sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand-strong);text-decoration:none}
button,input,select,textarea{font:inherit}
.shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
.sidebar{background:#fbfcfc;border-inline-end:1px solid var(--line);padding:24px 18px;position:sticky;top:0;height:100vh}
.brand-wrap{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-logo{width:54px;height:54px;border-radius:16px;background:#fff;border:1px solid var(--line);padding:6px;object-fit:contain}
.brand-logo-image{background:#fff;padding:4px;object-fit:contain}
.brand-mark-image{display:block;background:#fff;padding:6px;object-fit:contain;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.login-logo-banner{width:min(360px,100%);max-height:140px;object-fit:contain;display:block;margin:0 0 18px}

.brand{font-size:16px;font-weight:900;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.brand-sub{font-size:12px;color:var(--muted);line-height:1.45}

.brand-user-name{font-size:12px;font-weight:800;color:var(--brand-strong);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.sidebar nav a{padding:14px 16px;border-radius:18px;color:var(--text);background:transparent;transition:.2s ease;border:1px solid transparent;font-size:15px;font-weight:700}
.sidebar nav a:hover{background:var(--brand-soft);color:var(--brand-strong);border-color:#d8e5e7}
.sidebar nav .danger{color:var(--danger)}
.main{padding:28px 30px 34px;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.topbar h1{margin:0 0 6px;font-size:31px;line-height:1.2}
.topbar-text{min-width:0}
.muted{color:var(--muted)}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.soft-pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:var(--brand-soft);color:var(--brand-strong);font-size:14px;font-weight:700}
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:18px}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-dropdown{position:absolute;top:48px;inset-inline-end:0;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;z-index:40}
.lang-dropdown a{padding:10px 12px;border-radius:12px}
.lang-dropdown a:hover{background:var(--brand-soft)}
.logout-link{padding:11px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--danger);font-weight:700}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.stat,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat{padding:22px}
.stat span{display:block;color:var(--muted);margin-bottom:12px;font-size:14px}
.stat strong{font-size:32px;color:var(--brand-strong);line-height:1.1}
.card{padding:22px}
.card h2{margin:0 0 16px;font-size:20px;line-height:1.4}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h2{margin:0}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px}
input,select,textarea{width:100%;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:15px;min-height:52px}
textarea{resize:vertical;min-height:94px}
button{padding:15px 20px;border:none;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-weight:800;cursor:pointer;font-size:15px;min-height:52px}
button:hover{filter:brightness(.98)}
button.secondary{background:#fff;color:var(--text);border:1px solid var(--line)}
.inline{display:inline-flex;flex-direction:row;gap:8px;align-items:center;font-weight:600}
.inline input{width:auto}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:660px}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:start;font-size:14px;vertical-align:top}
thead th{color:var(--muted);font-weight:700;background:#fafbfc}
.fields-list{display:flex;flex-direction:column;gap:12px}
.field-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--panel-soft)}
.field-label small{display:block;color:#7c8797;margin-top:6px;font-size:12.5px;line-height:1.6}
.answers-list,.meta-list,.plain-list{display:flex;flex-direction:column;gap:10px;padding:0;margin:0;list-style:none}
.answer-row,.timeline-item,.attachment-item,.readonly-box,.summary-card{padding:13px 14px;border:1px solid var(--line);border-radius:18px;background:var(--panel-soft)}
.answer-row .q{font-weight:800;margin-bottom:6px}
.readonly-box span{display:block;color:var(--muted);margin-bottom:8px}
.readonly-box strong{font-size:16px}
.alert{background:var(--danger-soft);border:1px solid #f3d0cb;color:#91453f;padding:12px 14px;border-radius:16px;margin-bottom:14px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(540px,100%);background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:30px;padding:26px;box-shadow:var(--shadow)}
.login-top-actions{display:flex;justify-content:flex-end;margin-bottom:10px}
.login-top-actions .lang-menu .lang-dropdown{inset-inline-start:auto}
.login-brand{text-align:center;margin-bottom:16px}
.hero-logo{width:94px;height:94px;object-fit:contain;margin-bottom:10px}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;color:var(--muted)}
.help-grid div{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft);font-size:13px}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.thumb-link{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.thumb-link img{display:block;width:100%;height:94px;object-fit:cover}
.inline-thumb{width:72px;min-width:72px}
.inline-thumb img{height:72px}
.attachment-item{display:flex;gap:12px;align-items:center}
.summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.summary-card span{display:block;color:var(--muted);margin-bottom:8px}
.summary-card strong{font-size:22px;color:var(--brand-strong)}
.mobile-only{display:none}
.desktop-only{display:inline-flex}
.rtl{direction:rtl}
.ltr{direction:ltr}
/* camera */
.camera-widget{display:flex;flex-direction:column;gap:10px}
.camera-surface{min-height:1px;border:none;background:transparent;display:block}
.camera-video{width:100%;border-radius:18px;border:1px solid var(--line);max-height:300px;object-fit:cover}
.camera-actions-row{display:flex;gap:10px;flex-wrap:wrap}
.camera-actions-row .camera-btn{flex:1;min-height:58px;font-size:17px;border-radius:20px;background:linear-gradient(135deg,#88ab4b,#7a9f3c);color:#fff;border:none}
.camera-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.camera-thumb{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;min-height:92px}
.camera-thumb img{display:block;width:100%;height:108px;object-fit:cover}
.camera-thumb-remove{position:absolute;top:6px;left:6px;width:28px;height:28px;border-radius:999px;padding:0;background:rgba(0,0,0,.68);color:#fff;border:none;display:grid;place-items:center;font-size:18px;line-height:1}
.camera-status{font-size:13px;min-height:20px}
.repeater-list{display:flex;flex-direction:column;gap:12px}
.repeater-item{border:1px solid var(--line);border-radius:22px;background:var(--panel-soft);padding:16px}
.repeater-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.repeater-head h3{margin:0;font-size:16px}
.repeater-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.choice-chip{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;font-weight:700;min-width:88px;justify-content:center}
.choice-chip input{width:auto}
.section-label{margin-bottom:8px;font-size:14px;font-weight:800}
.archive-badge{background:var(--accent-soft);color:#5b7a1d}
.empty-state{padding:20px;text-align:center;color:var(--muted)}
@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;height:auto;padding:12px 12px 10px;z-index:20;border-inline-end:none;border-bottom:1px solid var(--line)}
  .brand-wrap{margin-bottom:10px}
  .brand-logo{width:44px;height:44px;border-radius:12px}
  .brand{font-size:14px}
  .brand-sub{font-size:11px}
  .sidebar nav{flex-direction:row;overflow:auto;gap:8px;padding-bottom:4px}
  .sidebar nav a{white-space:nowrap;padding:12px 14px;font-size:14px;background:#fff;border:1px solid var(--line)}
  .main{padding:14px 14px 24px}
  .topbar{flex-direction:column;align-items:stretch;margin-bottom:12px}
  .topbar h1{font-size:25px}
  .top-actions{justify-content:space-between}
  .top-actions .soft-pill{font-size:13px;padding:8px 11px}
  .grid.two,.grid.three,.field-row,.repeater-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat,.card{padding:16px;border-radius:20px}
  label{font-size:14px;gap:7px}
  input,select,textarea{font-size:16px;min-height:54px;padding:14px 15px}
  textarea{min-height:98px}
  button{width:100%;min-height:56px}
  .camera-gallery{grid-template-columns:repeat(2,1fr)}
  .camera-thumb img{height:118px}
  .help-grid{grid-template-columns:1fr 1fr}
  .mobile-only{display:inline-flex}
  .desktop-only{display:none}
  .table-wrap{border:none;background:transparent}
  table{min-width:540px}
}

.info-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.info-box{padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:var(--panel-soft);min-width:0}
.info-box span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.info-box strong{display:block;font-size:15px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.info-box.compact strong{font-size:16px}
.card h2 + .info-strip{margin-top:0}
.topbar-text p{margin:0}
.summary-card,.readonly-box,.answer-row,.timeline-item,.attachment-item{min-width:0}
.repeater-item label,.field-row label{min-width:0}
.table-wrap a{white-space:nowrap}
@media (max-width: 980px){
  .info-strip{grid-template-columns:1fr;gap:8px}
  .info-box{padding:11px 12px;border-radius:16px}
  .info-box strong{font-size:15px}
  .camera-actions-row{gap:8px}
  .camera-actions-row .camera-btn{font-size:15px;min-height:52px}
  .top-actions{gap:6px}
}


.summary-link{display:block;text-decoration:none}
.topbar{position:sticky;top:0;z-index:15;background:rgba(243,245,247,.92);backdrop-filter:blur(10px);padding-bottom:10px}
.table-wrap{overflow:auto}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.wide-form{max-width:1180px}
.summary-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.summary-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow)}
.summary-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.summary-card strong{font-size:18px;color:var(--brand-strong)}
@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
  .sidebar{padding:10px 10px 8px}
  .sidebar nav a{padding:10px 12px;border-radius:14px}
  .main{padding:10px 10px 18px}
  .topbar{padding-bottom:8px}
  .topbar h1{font-size:24px}
  .card h2{font-size:19px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat strong{font-size:26px}
  .summary-strip{grid-template-columns:1fr}
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap th,.table-wrap td,.table-wrap tr{display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:grid;gap:10px}
  .table-wrap tr{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow)}
  .table-wrap td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;border-bottom:none;font-size:14px}
  .table-wrap td::before{content:attr(data-label);font-weight:800;color:var(--muted);flex:0 0 42%}
  .table-wrap td a{white-space:normal;text-align:end}
}
@media (min-width: 981px){
  .main{padding:24px 28px 30px}
  .card{padding:20px}
  .stat{padding:20px}
  input,select,textarea{min-height:46px}
}

@media (max-width: 980px){
  .sidebar nav{padding-bottom:8px;}
  .topbar{gap:10px;}
  .repeater-head{align-items:flex-start;}
  .summary-card strong{font-size:20px;}
  .table-wrap td::before{flex:0 0 38%;}
}

.login-links{margin:6px 0 14px;text-align:center}
.login-links a{display:inline-flex;padding:10px 14px;border-radius:14px;background:var(--brand-soft);font-weight:700}
.super-shell .sidebar nav a.active{background:var(--brand-soft);border-color:#d8e5e7;color:var(--brand-strong)}


.workflow-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;align-items:start}.workflow-step{position:relative;padding:14px 12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.03);text-align:center}.workflow-step .workflow-dot{display:inline-block;width:12px;height:12px;border-radius:999px;margin-bottom:8px;background:#666}.workflow-step-current{border-color:rgba(212,175,55,.7);background:rgba(212,175,55,.08)}.workflow-step-current .workflow-dot{background:#d4af37}.workflow-step-done .workflow-dot{background:#2e8b57}.workflow-step-done{border-color:rgba(46,139,87,.45);background:rgba(46,139,87,.08)}.workflow-text{font-size:14px;font-weight:700}.readonly-box{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}

/* phase 7 calmer visuals */
:root{
  --bg:#f5f7f8;
  --panel:#ffffff;
  --panel-soft:#f8fafb;
  --line:#e6ebee;
  --text:#1f2a37;
  --muted:#72808f;
  --brand:#5b7a80;
  --brand-strong:#436268;
  --brand-soft:#eef4f5;
  --accent:#87a95a;
  --accent-soft:#f2f7eb;
  --shadow:0 8px 22px rgba(18, 33, 45, .05);
}
.sidebar{background:linear-gradient(180deg,#fbfcfd 0%,#f6f9fa 100%)}
.sidebar nav a.active{background:var(--brand-soft);border-color:#dce8ea;color:var(--brand-strong);box-shadow:0 6px 16px rgba(67,98,104,.08)}
.card,.stat{box-shadow:var(--shadow)}
.calm-card{background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%)}
.kpi-grid .stat-kpi strong{font-size:34px}
.kpi-grid .stat-kpi{background:linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%)}
.chart-stack{display:flex;flex-direction:column;gap:14px}
.metric-row{padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:var(--panel-soft)}
.metric-row.compact{padding:10px 12px}
.metric-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.metric-head strong{font-size:15px}
.metric-head span{font-size:13px;color:var(--muted);font-weight:700}
.bar-track{height:10px;background:#eef2f4;border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#90b2b7);border-radius:999px}
.bar-fill.soft{background:linear-gradient(90deg,#7f9e62,#adc67b)}
.bar-fill.amber{background:linear-gradient(90deg,#c6a05c,#e1c07a)}
.bar-fill.green{background:linear-gradient(90deg,#6f9c7d,#93c29f)}
.small-flex{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:12px;margin-top:8px}
.translated-note{margin-top:10px;padding:10px 12px;border:1px dashed #d9e3e6;border-radius:14px;background:#fcfdfd}
.translated-note span{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:5px}
.translated-note p{margin:0;color:var(--brand-strong)}
.inline-note{margin-top:8px}
.note-hint{font-size:12px;color:var(--muted);margin-top:8px}
.workflow-step{background:#fbfcfd;border:1px solid var(--line)}
.workflow-step-current{background:#f7fbf4;border-color:#dce7c9}
.workflow-step-done{background:#f3f8f4;border-color:#cfe0d3}
.readonly-box{background:#fbfcfd;border:1px solid var(--line)}
.topbar{background:rgba(245,247,248,.92)}
@media (max-width:980px){
  .metric-row{padding:11px 12px}
  .metric-head{margin-bottom:8px}
}

/* stage: cleaner OCS interface */
:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --panel-soft:#fafbfd;
  --line:#e7ebf0;
  --text:#18212b;
  --muted:#748091;
  --brand:#1f2937;
  --brand-strong:#0f172a;
  --brand-soft:#eef2f7;
  --shadow:0 12px 30px rgba(15,23,42,.05);
}
body{background:linear-gradient(180deg,#f7f8fb 0%,#f2f5f8 100%)}
.shell{grid-template-columns:290px minmax(0,1fr)}
.sidebar{padding:22px 16px;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
.compact-brand-wrap{padding:8px 4px 16px;margin-bottom:10px}
.brand-logo-text,.brand-mark{display:grid;place-items:center;font-weight:900;letter-spacing:.08em;color:#0f172a;background:linear-gradient(135deg,#fff 0%,#f2f5f9 100%);border:1px solid var(--line)}
.brand-logo-text{width:56px;height:56px;border-radius:18px;font-size:20px;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.brand-mark{width:72px;height:72px;border-radius:24px;font-size:28px;margin:0 auto 10px}
.brand-mark-lg{width:88px;height:88px;font-size:34px}
.brand{font-size:17px;line-height:1.45}
.brand-sub{font-size:12px;line-height:1.5}
.sidebar nav{gap:6px}
.sidebar nav a{padding:13px 15px;border-radius:16px;font-weight:800}
.sidebar nav a.active,.sidebar nav a:hover{background:#0f172a;color:#fff;border-color:#0f172a;box-shadow:0 10px 22px rgba(15,23,42,.12)}
.sidebar nav a.danger:hover{background:#fff;color:var(--danger);border-color:#f0d5d1;box-shadow:none}
.main{padding:24px 28px 36px}
.topbar{margin-bottom:22px;background:rgba(246,247,249,.92)}
.topbar h1{font-size:30px;font-weight:900;letter-spacing:-.02em}
.soft-pill{background:#fff;border:1px solid var(--line);color:var(--brand-strong);padding:9px 13px}
.logout-link{background:#fff}
.page-section{margin-bottom:22px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.section-head h2{margin:0;font-size:22px;letter-spacing:-.02em}
.compact-head h2{font-size:18px}
.section-head p{margin:4px 0 0}
.section-actions{display:flex;gap:10px;flex-wrap:wrap}
.ghost-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--brand-strong);font-weight:800}
.ghost-btn:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.modern-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.modern-kpi-grid .stat-kpi,.compact-stats-grid .compact-stat{padding:18px 18px 16px;border-radius:24px}
.stat-kpi{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)}
.stat-kpi span,.compact-stat span{font-size:13px;font-weight:700;color:var(--muted);text-transform:none}
.stat-kpi strong{font-size:34px;color:#0f172a}
.compact-stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.compact-stat strong{font-size:26px;color:#0f172a}
.dashboard-panel-grid{margin-bottom:18px}
.feature-card{padding:20px 20px 18px}
.metric-row{border-radius:16px;background:#fbfcfe}
.metric-head strong{font-weight:800}
.bar-track{height:12px;background:#edf2f7}
.bar-fill{background:linear-gradient(90deg,#111827,#475569)}
.bar-fill.soft{background:linear-gradient(90deg,#0f172a,#64748b)}
.bar-fill.amber{background:linear-gradient(90deg,#2b3441,#6b7280)}
.bar-fill.green{background:linear-gradient(90deg,#1f2937,#64748b)}
.quick-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.quick-link-card{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 18px 16px;box-shadow:var(--shadow);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.quick-link-card:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(15,23,42,.08);border-color:#d6dde6}
.quick-link-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.quick-link-badge{display:inline-flex;padding:8px 10px;border-radius:999px;background:#f3f6fa;color:#334155;font-size:12px;font-weight:800}
.quick-link-card h3{margin:0 0 8px;font-size:18px;color:#0f172a}
.quick-link-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.login-shell{padding:28px}
.login-hero-grid{width:min(1080px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
.login-panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow)}
.login-intro-panel{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);display:flex;flex-direction:column;justify-content:center}
.login-eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f3f5f9;color:#0f172a;font-weight:900;letter-spacing:.08em;width:max-content;margin-bottom:18px}
.login-intro-panel h1{margin:0 0 10px;font-size:42px;line-height:1.1;letter-spacing:-.03em}
.login-copy{font-size:16px;line-height:1.8;max-width:45ch}
.login-feature-list{display:grid;gap:12px;margin-top:18px}
.login-feature-item{padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff}
.login-feature-item strong{display:block;margin-bottom:6px;color:#0f172a}
.login-feature-item span{color:var(--muted);font-size:13px;line-height:1.6}
.login-form-panel{display:flex;flex-direction:column;justify-content:center}
.login-form-panel .login-top-actions{margin-bottom:18px}
.clean-brand{text-align:center;margin-bottom:12px}
.clean-brand h2{margin:0 0 6px;font-size:28px}
.login-form-stack{margin-top:10px}
.login-form-stack button{margin-top:8px}
.centered{text-align:center}
.small-gap{line-height:1.7}
.card,.stat,.login-card,.login-panel{border-color:var(--line)}
.table-wrap{border-radius:20px;background:#fff}
.table-wrap thead th{background:#f9fafb;font-size:12px;letter-spacing:.01em;text-transform:none}
.table-wrap td,.table-wrap th{padding:13px 12px}
.readonly-box,.answer-row,.timeline-item,.attachment-item,.summary-card,.info-box{background:#fbfcfe}
@media (max-width: 980px){
  .login-hero-grid{grid-template-columns:1fr}
  .login-intro-panel h1{font-size:30px}
  .section-head{flex-direction:column;align-items:stretch}
  .section-actions{width:100%}
  .ghost-btn{flex:1}
  .quick-links-grid{grid-template-columns:1fr}
  .brand-logo-text{width:48px;height:48px;border-radius:14px;font-size:18px}
}

/* refined executive dashboard */
.ops-shell{display:flex;flex-direction:column;gap:18px}
.ops-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 24px 20px;border-radius:28px;background:linear-gradient(180deg,#ffffff 0%,#fafcfd 100%)}
.ops-eyebrow{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-strong);font-size:12px;font-weight:800;margin-bottom:10px}
.ops-hero h2{margin:0 0 6px;font-size:28px;letter-spacing:-.03em}
.ops-hero p{margin:0;max-width:640px}
.ops-hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.subtle-ghost{background:var(--panel-soft)}
.ops-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ops-kpi-card{padding:22px;border-radius:24px;min-height:146px;display:flex;flex-direction:column;justify-content:space-between}
.ops-kpi-card span{font-size:13px;color:var(--muted);font-weight:800}
.ops-kpi-card strong{font-size:40px;line-height:1;color:#12212d;letter-spacing:-.04em}
.ops-kpi-card small{font-size:12px;color:var(--muted)}
.accent-slate{background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%)}
.accent-mint{background:linear-gradient(180deg,#ffffff 0%,#f4faf7 100%)}
.accent-sand{background:linear-gradient(180deg,#ffffff 0%,#fbf8f3 100%)}
.accent-soft{background:linear-gradient(180deg,#ffffff 0%,#f7fafb 100%)}
.ops-signal-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.signal-card{padding:16px 18px;border-radius:20px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%)}
.signal-card span{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-bottom:8px}
.signal-card strong{font-size:28px;line-height:1.1;color:#152332}
.panel-frame{padding:18px 18px 16px;border-radius:26px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
.panel-head p{margin:4px 0 0}
.soft-surface{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%);border-radius:20px}
.branch-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.branch-card{padding:16px}
.branch-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.branch-card-head strong{font-size:16px}
.branch-total{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:32px;padding:0 10px;border-radius:999px;background:#f1f5f7;color:#203140;font-size:13px;font-weight:800}
.ring-line{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ring-track{flex:1;height:10px;background:#edf2f4;border-radius:999px;overflow:hidden}
.ring-fill{display:block;height:100%;background:linear-gradient(90deg,#24465d,#8aa7b0);border-radius:999px}
.ring-rate{font-size:12px;font-weight:800;color:var(--brand-strong)}
.branch-card-meta{display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-size:12px}
.workload-list,.mix-list{display:flex;flex-direction:column;gap:12px}
.workload-item,.mix-item{padding:14px 16px}
.workload-top,.mix-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.workload-top strong,.mix-top strong{font-size:15px}
.workload-top p{margin:5px 0 0;font-size:12px}
.workload-total{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:999px;background:#f1f5f7;color:#203140;font-size:13px;font-weight:800}
.bar-track.slim{height:8px}
.workload-tags{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;margin-top:10px}
.activity-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:12px;align-items:end;min-height:270px}
.activity-day{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:flex-end;padding:10px 6px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%);border:1px solid var(--line);min-height:230px}
.activity-bar-wrap{width:100%;max-width:52px;height:148px;border-radius:999px;background:#eef2f4;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.activity-bar{display:block;width:100%;border-radius:999px;background:linear-gradient(180deg,#a7bcc2 0%,#304b5a 100%)}
.activity-day strong{font-size:18px;color:#132130}
.activity-day span{font-size:11px;color:var(--muted);text-align:center;word-break:break-word}
@media (max-width: 1180px){
  .ops-kpi-grid,.ops-signal-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .branch-card-grid{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .ops-hero{flex-direction:column;align-items:stretch;padding:18px;border-radius:22px}
  .ops-hero h2{font-size:24px}
  .ops-hero-actions{justify-content:stretch}
  .ops-hero-actions .ghost-btn{flex:1}
  .ops-kpi-grid,.ops-signal-strip{grid-template-columns:1fr 1fr}
  .ops-kpi-card{min-height:128px;padding:18px}
  .ops-kpi-card strong{font-size:34px}
  .activity-columns{grid-template-columns:repeat(4,minmax(0,1fr));min-height:auto}
  .activity-day{min-height:190px}
}
@media (max-width: 640px){
  .ops-kpi-grid,.ops-signal-strip{grid-template-columns:1fr}
  .activity-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* operations dashboard v3 */
.ops-v2-shell{gap:16px}
.ops-v2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:22px 24px;border-radius:28px;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid #e8edf3;box-shadow:0 18px 36px rgba(15,23,42,.05)}
.ops-v2-head-copy h2{margin:0 0 6px;font-size:29px;letter-spacing:-.03em;color:#0f172a}
.ops-v2-head-copy p{margin:0;max-width:640px}
.ops-v2-eyebrow{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#eff4fb;color:#334155;font-size:12px;font-weight:900;margin-bottom:12px}
.ops-v2-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ops-v2-link{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:14px;border:1px solid #d8e2ee;background:#fff;color:#0f172a;font-weight:800;font-size:13px;box-shadow:0 8px 18px rgba(148,163,184,.08);transition:.18s ease}
.ops-v2-link:hover{transform:translateY(-1px);border-color:#c3d1df;box-shadow:0 14px 28px rgba(148,163,184,.14)}
.ops-v2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ops-v2-kpi{padding:20px 22px;border-radius:24px;min-height:126px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid #e6ebf1;box-shadow:0 14px 28px rgba(15,23,42,.04)}
.ops-v2-kpi-meta{display:flex;flex-direction:column;gap:6px}
.ops-v2-kpi-meta span{font-size:13px;font-weight:900;color:#334155}
.ops-v2-kpi-meta small{font-size:12px;color:#7a8798;line-height:1.6}
.ops-v2-kpi strong{font-size:40px;line-height:1;color:#0f172a;letter-spacing:-.05em}
.ops-v2-signals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ops-v2-signal{padding:16px 18px;border-radius:20px;background:#fff;border:1px solid #e8edf3;box-shadow:0 10px 24px rgba(15,23,42,.04)}
.ops-v2-signal span{display:block;font-size:12px;font-weight:800;color:#7a8798;margin-bottom:8px}
.ops-v2-signal strong{font-size:28px;line-height:1;color:#162033}
.ops-v2-grid{display:grid;gap:16px}
.ops-v2-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(340px,.85fr)}
.ops-v2-secondary-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ops-v2-panel{padding:20px;border-radius:28px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid #e8edf3;box-shadow:0 18px 32px rgba(15,23,42,.05)}
.ops-v2-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.ops-v2-panel-head h3{margin:0;font-size:22px;letter-spacing:-.02em;color:#0f172a}
.ops-v2-panel-head p{margin:5px 0 0;color:#7a8798}
.ops-v2-performance-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:16px}
.ops-v2-branch-bars,.ops-v2-workload-list,.ops-v2-mix-list,.ops-v2-timeline-list{display:flex;flex-direction:column;gap:12px}
.ops-v2-branch-row,.ops-v2-workload-item,.ops-v2-timeline-item,.ops-v2-mini-card{padding:16px 16px 14px;border-radius:20px;border:1px solid #edf2f7;background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%)}
.ops-v2-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.ops-v2-row-head strong{font-size:15px;color:#0f172a}
.ops-v2-row-head span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 10px;border-radius:999px;background:#f1f5f9;color:#334155;font-size:12px;font-weight:900}
.ops-v2-row-head p{margin:5px 0 0;font-size:12px;color:#7a8798}
.ops-v2-row-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;font-size:12px;color:#7a8798}
.ops-v2-stack-track,.ops-v2-line-track{position:relative;height:10px;border-radius:999px;background:#edf2f7;overflow:hidden}
.ops-v2-stack-track{height:12px}
.ops-v2-stack-open,.ops-v2-line-track span{position:absolute;inset-block:0;border-radius:999px;background:linear-gradient(90deg,#cbd5e1,#94a3b8)}
.ops-v2-stack-closed{position:absolute;inset-block:0;inset-inline-start:0;border-radius:999px;background:linear-gradient(90deg,#111827,#374151);opacity:.95}
.ops-v2-line-track span{background:linear-gradient(90deg,#111827,#334155)}
.ops-v2-line-track.thin{height:8px}
.ops-v2-mini-board{display:flex;flex-direction:column;gap:12px}
.ops-v2-mini-title{font-size:13px;font-weight:900;color:#334155;margin-bottom:12px}
.ops-v2-mini-chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:10px;align-items:end;min-height:168px}
.ops-v2-mini-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-height:156px}
.ops-v2-mini-bar{display:block;width:100%;max-width:24px;border-radius:999px;background:linear-gradient(180deg,#94a3b8 0%,#0f172a 100%)}
.ops-v2-mini-day small{font-size:11px;color:#94a3b8}
.ops-v2-mini-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ops-v2-mini-links a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border-radius:14px;background:#f8fafc;border:1px solid #e6ebf1;color:#0f172a;font-size:13px;font-weight:800}
.ops-v2-status-summary{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px;border-radius:20px;border:1px solid #edf2f7;background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%)}
.ops-v2-status-summary div{display:flex;flex-direction:column;gap:6px}
.ops-v2-status-summary span{font-size:12px;color:#7a8798;font-weight:800}
.ops-v2-status-summary strong{font-size:24px;color:#111827;line-height:1}
@media (max-width: 1220px){
  .ops-v2-kpis,.ops-v2-signals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-v2-main-grid,.ops-v2-secondary-grid,.ops-v2-performance-layout{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .ops-v2-head{flex-direction:column;align-items:stretch;padding:18px}
  .ops-v2-head-copy h2{font-size:24px}
  .ops-v2-kpis,.ops-v2-signals,.ops-v2-status-summary,.ops-v2-mini-links{grid-template-columns:1fr}
  .ops-v2-kpi{min-height:auto}
}

/* ===== OCS Operations Dashboard v3 ===== */
.ops-v3-shell{display:flex;flex-direction:column;gap:18px}
.ops-v3-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:22px 24px;border-radius:28px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid #e8edf3;box-shadow:0 16px 34px rgba(15,23,42,.05)}
.ops-v3-head h2{margin:0 0 6px;font-size:30px;letter-spacing:-.03em;color:#111827}
.ops-v3-head p{margin:0;color:#7a8798}
.ops-v3-eyebrow{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#eff4fb;color:#475569;font-size:12px;font-weight:900;margin-bottom:12px}
.ops-v3-links{display:flex;flex-wrap:wrap;gap:10px}
.ops-v3-links a,.ops-v3-quick-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:14px;border:1px solid #e5ebf2;background:#fff;color:#0f172a;font-size:13px;font-weight:800;box-shadow:0 8px 18px rgba(148,163,184,.08);transition:.18s ease}
.ops-v3-links a:hover,.ops-v3-quick-link:hover{transform:translateY(-1px);border-color:#ced8e3;box-shadow:0 14px 24px rgba(148,163,184,.12)}
.ops-v3-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ops-v3-kpi{padding:20px 22px;border-radius:24px;border:1px solid #e7ecf3;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);box-shadow:0 14px 28px rgba(15,23,42,.04);display:flex;flex-direction:column;gap:8px;min-height:118px}
.ops-v3-kpi span{font-size:13px;font-weight:900;color:#475569}
.ops-v3-kpi strong{font-size:40px;line-height:1;color:#0f172a;letter-spacing:-.05em}
.ops-v3-kpi small{font-size:12px;color:#8a94a6}
.ops-v3-band,.ops-v3-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:16px}
.ops-v3-grid.lower{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.ops-v3-panel{padding:20px;border-radius:28px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid #e8edf3;box-shadow:0 18px 32px rgba(15,23,42,.05)}
.ops-v3-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.ops-v3-panel-head h3{margin:0;font-size:23px;letter-spacing:-.02em;color:#0f172a}
.ops-v3-panel-head p{margin:4px 0 0;color:#8a94a6}
.ops-v3-mini-stat{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:36px;padding:0 12px;border-radius:999px;background:#f2f5f9;color:#0f172a;font-weight:900;font-size:14px}
.ops-v3-chart-wrap{padding:10px 8px 0}.ops-v3-chart-wrap.compact{padding-top:0}
.ops-v3-line-chart{width:100%;height:auto;display:block}.ops-v3-axis{stroke:#d7dee7;stroke-width:1.4}.ops-v3-axis.soft{stroke:#eef2f7}
.ops-v3-point{fill:#0f172a;stroke:#fff;stroke-width:2}.ops-v3-point.blue{fill:#2563eb}
.ops-v3-label{font-size:11px;fill:#94a3b8;font-weight:700}.ops-v3-value{font-size:11px;fill:#475569;font-weight:800}
.ops-v3-donut-layout{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;padding-top:6px}
.ops-v3-donut{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;margin-inline:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.ops-v3-donut-hole{width:102px;height:102px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(15,23,42,.06)}
.ops-v3-donut-hole strong{font-size:30px;color:#0f172a;line-height:1}.ops-v3-donut-hole span{font-size:11px;color:#94a3b8;margin-top:6px;text-align:center}
.ops-v3-legend{display:flex;flex-direction:column;gap:12px}
.ops-v3-legend-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#f8fafc;border:1px solid #edf2f7}
.ops-v3-dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 auto}
.ops-v3-dot.color-1{background:#0f172a}.ops-v3-dot.color-2{background:#3b82f6}.ops-v3-dot.color-3{background:#14b8a6}.ops-v3-dot.color-4{background:#cbd5e1}
.ops-v3-legend-item strong{display:block;font-size:13px;color:#0f172a}.ops-v3-legend-item small{color:#7a8798}
.ops-v3-table-list,.ops-v3-staff-list{display:flex;flex-direction:column;gap:12px}
.ops-v3-table-row,.ops-v3-staff-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:20px;border:1px solid #edf2f7;background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%)}
.ops-v3-table-row strong,.ops-v3-staff-main strong{display:block;font-size:15px;color:#0f172a}
.ops-v3-table-row small,.ops-v3-staff-main small{display:block;margin-top:5px;font-size:12px;color:#7a8798}
.ops-v3-row-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ops-v3-pill,.ops-v3-muted-pill{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:900}
.ops-v3-pill{background:#eef2f7;color:#0f172a}.ops-v3-muted-pill{background:#f8fafc;color:#64748b;border:1px solid #e5ebf2}
.ops-v3-staff-item{align-items:flex-start}
.ops-v3-staff-metrics{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ops-v3-staff-metrics span,.ops-v3-summary-grid div span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#f8fafc;border:1px solid #e9eef5;color:#64748b;font-size:12px;font-weight:800}
.ops-v3-staff-metrics b{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 12px;border-radius:999px;background:#0f172a;color:#fff;font-size:13px}
.ops-v3-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.ops-v3-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ops-v3-summary-grid div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:18px;border:1px solid #edf2f7;background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%)}
.ops-v3-summary-grid div strong{font-size:24px;color:#0f172a;line-height:1}
@media (max-width: 1200px){.ops-v3-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-v3-band,.ops-v3-grid,.ops-v3-grid.lower{grid-template-columns:1fr}}
@media (max-width: 720px){.ops-v3-head{flex-direction:column;align-items:stretch;padding:18px}.ops-v3-head h2{font-size:24px}.ops-v3-kpis,.ops-v3-quick-grid,.ops-v3-summary-grid{grid-template-columns:1fr}.ops-v3-donut-layout{grid-template-columns:1fr}.ops-v3-table-row,.ops-v3-staff-item{flex-direction:column;align-items:flex-start}.ops-v3-row-end,.ops-v3-staff-metrics{justify-content:flex-start}}

/* phase 8 executive dashboard refinement */
:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --line:#e7edf3;
  --text:#101828;
  --muted:#667085;
  --brand:#0f172a;
  --brand-strong:#0b1220;
  --brand-soft:#eef2f6;
  --shadow:0 14px 34px rgba(15,23,42,.05);
}
body{background:linear-gradient(180deg,#f7f8fa 0%,#f3f5f8 100%)}
.sidebar{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border-inline-end:1px solid #e6ebf1}
.sidebar nav a{border-radius:15px;font-weight:800;color:#334155}
.sidebar nav a.active,.sidebar nav a:hover{background:#0f172a;color:#fff;border-color:#0f172a;box-shadow:0 10px 22px rgba(15,23,42,.11)}
.topbar{background:rgba(244,246,248,.9);backdrop-filter:blur(12px)}
.soft-pill{background:#fff;border:1px solid var(--line);color:#0f172a}
.login-panel,.card,.stat{box-shadow:var(--shadow)}
.login-panel{border-radius:32px}
.login-intro-panel h1{font-size:40px;letter-spacing:-.04em}
.login-feature-item{border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.login-form-panel .brand-mark{background:linear-gradient(180deg,#fff 0%,#f5f7fb 100%)}

.exec-shell{display:flex;flex-direction:column;gap:18px}
.exec-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:26px 28px;border-radius:30px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid var(--line)}
.exec-hero-copy h2{margin:0 0 8px;font-size:30px;letter-spacing:-.04em;color:#0f172a}
.exec-hero-copy p{margin:0;max-width:720px;font-size:14px;line-height:1.9}
.exec-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#f1f5f9;color:#334155;font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:14px}
.exec-hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.exec-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:14px;background:#fff;border:1px solid var(--line);color:#0f172a;font-size:13px;font-weight:800;transition:.18s ease}
.exec-action:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.08)}
.exec-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.exec-kpi-card{padding:22px 22px 20px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:132px}
.exec-kpi-card span{display:block;font-size:12px;font-weight:900;color:#667085;letter-spacing:.02em;margin-bottom:10px}
.exec-kpi-card strong{display:block;font-size:40px;line-height:1;color:#101828;letter-spacing:-.05em}
.exec-kpi-card small{font-size:12px;color:#98a2b3;line-height:1.7}
.exec-signal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.exec-signal-card{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%)}
.exec-signal-card span{display:block;font-size:12px;font-weight:800;color:#667085;margin-bottom:8px}
.exec-signal-card strong{display:block;font-size:28px;line-height:1;color:#101828;letter-spacing:-.04em}
.exec-grid{display:grid;gap:16px}
.exec-grid-top{grid-template-columns:minmax(0,1.35fr) minmax(360px,.85fr)}
.exec-grid-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
.exec-grid-bottom.lower-balance{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.exec-panel{padding:22px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%)}
.exec-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.exec-panel-head h3{margin:0;font-size:22px;letter-spacing:-.03em;color:#0f172a}
.exec-panel-head p{margin:5px 0 0;font-size:13px;line-height:1.8;color:#98a2b3}
.exec-badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:34px;padding:0 12px;border-radius:999px;background:#f3f4f6;color:#344054;font-size:13px;font-weight:900}
.exec-line-wrap{padding-top:6px}
.exec-line-chart{width:100%;height:auto;display:block}
.exec-axis{stroke:#e6ebf1;stroke-width:1.4}.exec-axis.soft{stroke:#edf2f7}
.exec-point{fill:#0f172a;stroke:#fff;stroke-width:2.5}
.exec-label{font-size:11px;fill:#98a2b3;font-weight:800}
.exec-value{font-size:11px;fill:#475467;font-weight:900}
.exec-foot-note{display:flex;flex-wrap:wrap;gap:10px 18px;padding-top:6px;color:#667085;font-size:12px;font-weight:700}
.exec-donut-block{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;padding-top:4px}
.exec-donut{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;margin-inline:auto}
.exec-donut-hole{width:116px;height:116px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.exec-donut-hole strong{font-size:34px;line-height:1;color:#101828}
.exec-donut-hole small{margin-top:6px;font-size:12px;color:#98a2b3;text-align:center}
.exec-legend-list{display:flex;flex-direction:column;gap:12px}
.exec-legend-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#f8fafc;border:1px solid #eef2f6}
.exec-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.exec-legend-dot.tone-1{background:#0f172a}.exec-legend-dot.tone-2{background:#475569}.exec-legend-dot.tone-3{background:#94a3b8}.exec-legend-dot.tone-4{background:#d8dee6}
.exec-legend-copy strong{display:block;font-size:13px;color:#101828}
.exec-legend-copy small{color:#667085}
.exec-rank-list{display:flex;flex-direction:column;gap:12px}
.exec-rank-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid #edf2f7;border-radius:18px;background:#fcfdff}
.exec-rank-main{display:flex;align-items:center;gap:12px;min-width:0}
.exec-rank-index{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#f3f4f6;color:#334155;font-size:12px;font-weight:900;flex:0 0 auto}
.exec-rank-main strong{display:block;font-size:15px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.exec-rank-main small{display:block;margin-top:4px;font-size:12px;color:#667085;line-height:1.6}
.exec-rank-side{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.exec-stack-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.exec-stack-side small{font-size:12px;color:#667085;text-align:end;line-height:1.6}
.exec-chip{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:32px;padding:0 10px;border-radius:999px;background:#f3f4f6;color:#334155;font-size:12px;font-weight:900}
.exec-chip.muted{background:#fafbfc;border:1px solid var(--line);color:#667085}
.exec-focus-list{display:flex;flex-direction:column;gap:12px}
.exec-focus-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #edf2f7;border-radius:18px;background:#fcfdff;font-size:14px;color:#344054}
.exec-focus-row strong{font-size:22px;line-height:1;color:#101828;letter-spacing:-.03em}
.exec-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.exec-quick-card{display:flex;flex-direction:column;gap:8px;min-height:112px;padding:16px;border-radius:20px;border:1px solid #edf2f7;background:#fcfdff;color:#101828;transition:.18s ease}
.exec-quick-card:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.06)}
.exec-quick-card strong{font-size:16px}
.exec-quick-card small{font-size:12px;line-height:1.8;color:#667085}

@media (max-width:1200px){
  .exec-grid-top{grid-template-columns:1fr}
}
@media (max-width:980px){
  .exec-hero{flex-direction:column;align-items:stretch;padding:20px}
  .exec-kpi-grid,.exec-signal-grid,.exec-grid-bottom,.exec-grid-bottom.lower-balance{grid-template-columns:1fr 1fr}
  .exec-donut-block{grid-template-columns:1fr;gap:14px}
  .exec-quick-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .exec-kpi-grid,.exec-signal-grid,.exec-grid-bottom,.exec-grid-bottom.lower-balance{grid-template-columns:1fr}
  .exec-panel{padding:18px}
  .exec-panel-head h3{font-size:20px}
  .exec-kpi-card strong{font-size:34px}
  .exec-rank-row,.exec-focus-row{flex-direction:column;align-items:flex-start}
  .exec-rank-side,.exec-stack-side{align-items:flex-start;justify-content:flex-start}
}

/* phase9 executive dashboard */
.opsx-shell{max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-bottom:8px}
.opsx-shell .card{box-shadow:0 14px 40px rgba(15,23,42,.05);border-color:#e9edf2}
.opsx-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px;padding:28px 30px;border-radius:32px;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
.opsx-eyebrow{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#f4f7fa;color:#475467;font-size:12px;font-weight:900;letter-spacing:.18em;margin-bottom:14px}
.opsx-hero-main h2{margin:0 0 10px;font-size:34px;line-height:1.1;letter-spacing:-.045em;color:#111827}
.opsx-hero-main p{margin:0;max-width:760px;font-size:15px;line-height:1.9;color:#667085}
.opsx-hero-side{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.opsx-meta-card{padding:18px 18px 16px;border-radius:24px;background:#f8fafc;border:1px solid #eaedf1;display:flex;flex-direction:column;gap:7px;min-height:122px}
.opsx-meta-card.soft{background:#fcfdff}
.opsx-meta-card span{font-size:12px;font-weight:800;color:#98a2b3}
.opsx-meta-card strong{font-size:20px;line-height:1.35;color:#101828;letter-spacing:-.02em}
.opsx-meta-card small{font-size:12px;line-height:1.8;color:#667085}
.opsx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.opsx-kpi{padding:24px 24px 22px;border-radius:26px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.opsx-kpi span{font-size:12px;font-weight:900;color:#98a2b3;text-transform:uppercase;letter-spacing:.08em}
.opsx-kpi strong{font-size:46px;line-height:1;letter-spacing:-.06em;color:#111827}
.opsx-kpi small{font-size:13px;color:#667085;line-height:1.8}
.opsx-queue-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:12px 14px;border-radius:26px;background:#fff}
.opsx-queue-item{padding:14px 18px;display:flex;flex-direction:column;gap:8px;position:relative}
.opsx-queue-item:not(:last-child)::after{content:"";position:absolute;top:12px;bottom:12px;inset-inline-end:0;width:1px;background:#eef2f6}
.opsx-queue-item span{font-size:12px;font-weight:800;color:#667085}
.opsx-queue-item strong{font-size:32px;line-height:1;color:#111827;letter-spacing:-.04em}
.opsx-primary-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.75fr);gap:18px}
.opsx-secondary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.opsx-panel{padding:24px 24px 22px;border-radius:30px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%)}
.opsx-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.opsx-panel-head h3{margin:0;font-size:23px;line-height:1.2;letter-spacing:-.035em;color:#111827}
.opsx-panel-head p{margin:6px 0 0;font-size:13px;line-height:1.8;color:#98a2b3}
.opsx-pill{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:36px;padding:0 12px;border-radius:999px;background:#f3f4f6;color:#344054;font-size:13px;font-weight:900}
.opsx-pill.muted{background:#fafbfc;border:1px solid #edf2f7}
.opsx-trend-micro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.opsx-trend-micro div{padding:12px 14px;border-radius:18px;background:#f8fafc;border:1px solid #eef2f6;display:flex;flex-direction:column;gap:4px}
.opsx-trend-micro span{font-size:12px;color:#98a2b3;font-weight:800}
.opsx-trend-micro strong{font-size:21px;line-height:1.2;color:#111827}
.opsx-chart-frame{padding:10px 4px 0}
.opsx-line-chart{display:block;width:100%;height:auto}
.opsx-axis{stroke:#e6ebf1;stroke-width:1.4}.opsx-axis.soft{stroke:#edf2f7}.opsx-grid{stroke:#f1f5f9;stroke-width:1.2}
.opsx-point{fill:#111827;stroke:#fff;stroke-width:3}
.opsx-label{font-size:11px;fill:#98a2b3;font-weight:800}
.opsx-value{font-size:11px;fill:#475467;font-weight:900}
.opsx-status-body{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:center}
.opsx-donut{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;margin-inline:auto}
.opsx-donut-hole{width:122px;height:122px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(15,23,42,.08)}
.opsx-donut-hole strong{font-size:36px;line-height:1;color:#111827}
.opsx-donut-hole small{margin-top:6px;font-size:12px;line-height:1.6;color:#98a2b3;text-align:center}
.opsx-status-list{display:flex;flex-direction:column;gap:12px}
.opsx-status-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#f8fafc;border:1px solid #eef2f6}
.opsx-dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex:0 0 auto}
.opsx-dot.tone-1{background:#111827}.opsx-dot.tone-2{background:#475569}.opsx-dot.tone-3{background:#94a3b8}.opsx-dot.tone-4{background:#dfe5eb}
.opsx-status-row strong{display:block;font-size:14px;color:#111827}
.opsx-status-row small{display:block;margin-top:4px;color:#667085}
.opsx-list-table{display:flex;flex-direction:column;gap:12px}
.opsx-list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:20px;background:#fcfdff;border:1px solid #edf2f7}
.opsx-list-main{min-width:0}
.opsx-list-main strong{display:block;font-size:15px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.opsx-list-main small{display:block;margin-top:5px;font-size:12px;line-height:1.7;color:#667085}
.opsx-list-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.opsx-list-side span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:34px;padding:0 12px;border-radius:999px;background:#f3f4f6;color:#344054;font-size:12px;font-weight:900}
.opsx-list-side small{font-size:12px;color:#98a2b3}
.opsx-list-side.stacked small{max-width:150px;text-align:end;line-height:1.6}
.opsx-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opsx-focus-box{padding:16px 18px;border-radius:20px;background:#fcfdff;border:1px solid #edf2f7;display:flex;flex-direction:column;gap:8px}
.opsx-focus-box span{font-size:12px;font-weight:800;color:#667085;line-height:1.7}
.opsx-focus-box strong{font-size:30px;line-height:1;color:#111827;letter-spacing:-.04em}
.opsx-quick-links{margin-top:16px;padding-top:16px;border-top:1px solid #eef2f6}
.opsx-quick-title{display:block;margin-bottom:12px;font-size:12px;font-weight:900;color:#98a2b3;text-transform:uppercase;letter-spacing:.08em}
.opsx-link-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opsx-link-row a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border-radius:16px;background:#fff;border:1px solid #e9edf2;color:#111827;font-size:13px;font-weight:800;transition:.18s ease}
.opsx-link-row a:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.06)}
@media (max-width:1250px){
  .opsx-hero{grid-template-columns:1fr}
  .opsx-primary-grid,.opsx-secondary-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .opsx-shell{gap:14px}
  .opsx-hero{padding:20px;border-radius:24px}
  .opsx-hero-main h2{font-size:28px}
  .opsx-hero-side{grid-template-columns:1fr}
  .opsx-kpis,.opsx-queue-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .opsx-queue-item:not(:last-child)::after{display:none}
  .opsx-status-body,.opsx-trend-micro,.opsx-focus-grid,.opsx-link-row{grid-template-columns:1fr}
  .opsx-panel{padding:20px;border-radius:24px}
}
@media (max-width:680px){
  .opsx-kpis,.opsx-queue-strip,.opsx-secondary-grid{grid-template-columns:1fr}
  .opsx-kpi strong{font-size:38px}
  .opsx-queue-item strong{font-size:28px}
  .opsx-list-row{flex-direction:column;align-items:flex-start}
  .opsx-list-side,.opsx-list-side.stacked{align-items:flex-start}
  .opsx-list-side.stacked small{text-align:start;max-width:none}
}

.studio-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.studio-badges{display:flex;flex-wrap:wrap;gap:10px}
.studio-kpis .kpi-card{padding:22px;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.studio-kpis .kpi-value{font-size:36px;line-height:1;font-weight:900;color:#111827;margin:10px 0 6px}
.studio-grid{margin-top:18px}
.studio-card .section-head h3,.section-head h3{margin:0;font-size:22px;letter-spacing:-.02em}
.studio-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.action-tile{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:20px;background:#fcfdff;border:1px solid #edf2f7;color:#111827;transition:.18s ease}
.action-tile strong{font-size:15px}
.action-tile span{font-size:12px;line-height:1.8;color:#667085}
.action-tile:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.06)}
.soft-link{color:#667085;font-weight:800;font-size:13px}
.small{font-size:12px}
@media (max-width:900px){.studio-hero,.studio-actions{grid-template-columns:1fr;display:grid}.studio-actions{grid-template-columns:1fr}}

.alert.success{background:#eef8ec;border-color:#cfe7c7;color:#2f6a35}
.alert.warning{background:#fff8e8;border-color:#ecd9a3;color:#8a6514}
button.destructive, .button-destructive{background:linear-gradient(135deg,#b2554a,#984237)!important;color:#fff}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.inline-actions form{margin:0}
.muted-link{color:var(--muted);font-weight:700;text-align:center;display:block;margin-top:8px}

.logo-stage{background:#020202;border-radius:24px;padding:18px 22px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(2,6,23,.14)}
.logo-stage-image{width:min(100%,420px);max-height:160px;object-fit:contain;display:block}
.hero-logo-stage{width:min(420px,100%);margin:0 auto 22px}
.compact-logo-stage{width:min(152px,100%);margin:0 auto 20px;border-radius:18px;padding:0;background:transparent;box-shadow:none}
.compact-super-stage{width:min(118px,100%)}
.login-brand-panel{text-align:center;align-items:center}
.clean-login-grid .login-intro-panel h1{font-size:40px;margin:0 0 10px}
.dev-note{margin-top:14px;font-size:12px;letter-spacing:.08em;color:#64748b;text-transform:uppercase}
.dev-note strong{color:#0f172a}
.super-login-card{width:min(560px,100%);margin:auto;background:rgba(255,255,255,.98);border-radius:30px;padding:28px;box-shadow:var(--shadow)}
.super-login-brand{margin-bottom:18px}
.single-help-link{grid-template-columns:1fr}
@media (max-width:980px){
  .clean-login-grid .login-intro-panel h1{font-size:28px}
  .hero-logo-stage{width:min(320px,100%)}
  .compact-logo-stage{width:min(118px,100%)}
}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.check-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:#fbfcfe;font-size:13px}
.check-chip input{accent-color:#0f172a}


/* stage 13 login polish */
.refined-login-grid{grid-template-columns:.96fr 1.04fr}
.login-copy-panel{align-items:center;text-align:center;padding-inline:42px}
.login-copy-panel .login-eyebrow{margin-inline:auto;background:#eef2f7;color:#0f172a}
.login-copy-panel .login-ar-title{margin:0 0 12px;font-size:30px;line-height:1.3;color:#0f172a;letter-spacing:-.02em}
.login-copy-tight{max-width:30ch;margin:0 auto;font-size:17px}
.refined-form-panel{justify-content:flex-start}
.refined-logo-stage{background:transparent;border-radius:18px;padding:0;min-height:auto;box-shadow:none}
.refined-logo-image{width:min(100%,156px);max-height:72px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(15,23,42,.14))}
.login-helper-note{font-size:13px;margin-top:4px}
.login-page-dev-note{margin-top:10px}
.super-login-shell{display:flex;align-items:center;justify-content:center}
.super-login-card{width:min(560px,100%)}
.compact-super-stage{width:min(118px,100%);margin:0 auto 20px}
.brand-logo{padding:8px}
.brand-logo-image{background:transparent;padding:0}
.brand-wrap .brand-logo-image{object-fit:contain}
@media (max-width:980px){
  .refined-login-grid{grid-template-columns:1fr}
  .login-copy-panel{padding-inline:22px}
  .login-copy-panel .login-ar-title{font-size:24px}
  .login-copy-tight{font-size:15px}
  .refined-logo-stage{min-height:auto;padding:0}
  .refined-logo-image{max-height:58px;width:min(100%,132px)}
}


/* stage 14 final ui polish */
.polished-brand-wrap{align-items:flex-start;gap:14px;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid rgba(230,235,238,.9)}
.brand-logo-chip{width:48px;height:48px;min-width:48px;border-radius:14px;background:#05070b;display:grid;place-items:center;box-shadow:0 10px 20px rgba(15,23,42,.10);overflow:hidden}
.inverted-brand-logo{width:82%;height:82%;background:transparent;padding:0;border:none;object-fit:contain;filter:none}
.brand-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.client-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.brand-meta-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meta-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#ffffff;border:1px solid var(--line);font-size:11px;font-weight:800;color:#17202a;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted-chip{background:var(--panel-soft);color:var(--muted)}
.sidebar nav{margin-top:4px}
.sidebar nav a{position:relative;padding:12px 14px 12px 16px;border-radius:15px;font-size:14px;line-height:1.35}
.sidebar nav a.active,.sidebar nav a:hover{background:#0f172a;color:#fff;border-color:#0f172a;box-shadow:0 10px 24px rgba(15,23,42,.12)}
.sidebar nav a.active::before,.sidebar nav a:hover::before{content:"";position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);width:5px;height:18px;border-radius:999px;background:#dbe7ea;opacity:.92}
.topbar{align-items:center;gap:14px;margin-bottom:16px;padding:8px 0 14px;border-bottom:1px solid rgba(230,235,238,.9)}
.topbar h1{font-size:29px;margin-bottom:4px}
.topbar .muted{font-size:14px;line-height:1.55}
.polished-top-actions{gap:8px;justify-content:flex-end}
.polished-top-actions .soft-pill{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 13px;background:#fff;border:1px solid var(--line);color:#30414f;box-shadow:none}
.polished-top-actions .pill-client{background:#eef4f5;color:var(--brand-strong);border-color:#dbe6e8}
.polished-top-actions .pill-user{background:#ffffff}
.polished-top-actions .pill-branch{background:#f7f9fb;color:#526170}
.logout-link{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:800}
.logout-link:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.lang-menu summary{box-shadow:none}
.super-login-shell{padding:28px 16px}
.super-login-card{width:min(520px,100%);padding:30px 28px;border:1px solid var(--line)}
.super-login-brand h1{margin-bottom:10px}
.super-login-brand .muted{max-width:34ch;margin:0 auto;line-height:1.7}
.refined-logo-stage{box-shadow:0 20px 46px rgba(2,6,23,.16)}
.login-copy-panel .login-eyebrow{background:#eef3f7;color:#1f2a37;letter-spacing:.12em}
.login-copy-panel h1{font-size:46px}
.login-copy-panel .login-ar-title{color:#16202a}
.login-form-panel .login-brand h2{margin-top:4px;margin-bottom:6px}
.login-form-stack{gap:14px}

.form-dev-note{margin:10px 0 14px;text-align:center;font-size:13.5px;letter-spacing:.16em;color:#475569;text-transform:uppercase;font-weight:700}
.form-dev-note strong{color:#0f172a;font-weight:900}
.login-links a{background:#f3f6f9;border:1px solid var(--line)}
.login-links a:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.dev-note{font-size:11px;letter-spacing:.12em}
@media (max-width: 980px){
  .polished-brand-wrap{padding-bottom:12px;margin-bottom:10px}
  .brand-logo-chip{width:42px;height:42px;min-width:42px;border-radius:13px}
  .brand-meta-line{gap:6px}
  .meta-chip{padding:5px 8px;font-size:10px}
  .topbar{padding-bottom:10px}
  .polished-top-actions{justify-content:flex-start}
  .polished-top-actions .soft-pill{max-width:calc(50vw - 36px)}
  .login-copy-panel h1{font-size:33px}
}

.tiny-note{font-size:12px;margin-top:8px}

.cred-hint{margin:-2px 0 6px;text-align:center;font-size:12px;color:var(--muted)}
.cred-hint strong{color:#0f172a}


/* stage 19 online polish */
.refined-logo-stage,.logo-stage.compact-logo-stage,.logo-stage.hero-logo-stage.compact-super-stage{background:transparent !important;box-shadow:none !important;padding:0 !important;border:none !important;}
.refined-logo-image{width:min(100%,150px) !important;max-height:54px !important;filter:none !important;object-fit:contain;}
.compact-logo-stage{width:min(150px,100%) !important;margin:0 auto 16px !important;}
.compact-super-stage{width:min(170px,100%) !important;margin:0 auto 16px !important;}
.form-dev-note{margin:12px 0 6px;text-align:center;font-size:15px;letter-spacing:.12em;color:#334155;text-transform:uppercase;font-weight:800;}
.form-dev-note strong{color:#0f172a;font-weight:900;}
.field-label small{display:block !important;}
.brand-mark-image{background:transparent !important;padding:0 !important;box-shadow:none !important;}

.compact-head{margin-bottom:10px}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:10px}
.permission-chip{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:#fbfcfe;min-height:auto}
.permission-chip input{width:18px;height:18px;margin:2px 0 0;flex:0 0 18px;accent-color:#111827}
.permission-copy{display:flex;flex-direction:column;gap:3px;line-height:1.5}
.permission-copy strong{font-size:14px;color:#111827}
.permission-copy small{font-size:11px;color:#6b7280}
.wrap-actions{flex-wrap:wrap}
.readonly-box span{display:block}
@media (max-width:900px){.permission-grid{grid-template-columns:1fr}}


/* Super admin logo polish */
.super-brand-wrap{align-items:center;gap:14px;padding:2px 0 18px;margin-bottom:14px;border-bottom:1px solid rgba(230,235,238,.9)}
.super-brand-mark{display:flex;align-items:center;justify-content:center;width:124px;min-width:124px;height:auto;padding:0;background:transparent;border:none;box-shadow:none;overflow:visible}
.super-brand-logo{display:block;width:100%;height:auto;object-fit:contain}
.super-brand-wrap .brand-copy{gap:4px}
.super-brand-wrap .brand{font-size:22px;line-height:1.15;margin:0}
.super-brand-wrap .brand-sub{font-size:13px;line-height:1.3}
.super-brand-wrap .brand-meta-line{margin-top:2px}
.super-login-brand{margin-bottom:20px}
.super-hero-logo-stage{width:min(260px,100%);margin:0 auto 18px}
.super-hero-logo-image{width:min(100%,220px) !important;max-height:72px !important;display:block;margin:0 auto;object-fit:contain}
@media (max-width: 640px){
  .super-brand-wrap{gap:10px;padding-bottom:12px;margin-bottom:10px}
  .super-brand-mark{width:104px;min-width:104px;height:auto;padding:0}
  .super-brand-wrap .brand{font-size:19px}
  .super-brand-wrap .brand-sub{font-size:12px}
  .super-hero-logo-stage{width:min(220px,100%);margin:0 auto 14px}
  .super-hero-logo-image{width:min(100%,184px) !important;max-height:60px !important}
}

/* stage 20 logo + login layout refinement */
.brand-logo-plain{display:flex;align-items:center;justify-content:flex-start;min-width:124px;max-width:132px;padding:0;background:transparent;border:none;box-shadow:none;overflow:visible}
.brand-logo-wordmark{display:block;width:100%;height:auto;object-fit:contain;filter:none}
.brand-wrap.compact-brand-wrap{align-items:flex-start;gap:14px}
.brand-wrap.compact-brand-wrap .brand-copy{padding-top:2px}

.login-hero-grid.refined-login-grid{gap:16px}
.login-panel{background:rgba(255,255,255,.98);border-radius:28px}
.login-copy-panel{background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);border-color:#e7ebf0}
.refined-form-panel{background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border-color:#e7ebf0;box-shadow:0 10px 28px rgba(15,23,42,.05)}
.login-top-actions{margin-bottom:4px}
.login-brand{margin-bottom:14px}
.login-brand.clean-brand{display:flex;flex-direction:column;align-items:center}
.login-form-stack{gap:13px;margin-bottom:6px}
.login-helper-note{font-size:12.5px;line-height:1.65;max-width:34ch;margin:8px auto 0}
.login-links{margin:10px 0 10px}
.login-links a{min-width:116px;justify-content:center}
.form-dev-note-bottom{margin-top:14px;padding-top:12px;border-top:1px solid #edf1f4;font-size:12.5px;letter-spacing:.12em;color:#64748b}
.form-dev-note-bottom strong{color:#111827}

.brand-mark{background:transparent;border:none;box-shadow:none}
.brand-mark-image{width:min(100%,160px);height:auto;display:block;margin:0 auto;background:transparent !important;padding:0 !important;box-shadow:none !important}

.super-login-card .form-dev-note-bottom{margin-top:18px}
.super-brand-wrap,.brand-wrap.compact-brand-wrap{border-bottom:1px solid rgba(230,235,238,.92)}
.super-brand-mark{width:132px;min-width:132px}
.super-brand-logo{width:100%;height:auto;object-fit:contain}

/* remove framed logo look everywhere in app sidebar/header contexts */
.brand-logo-chip{width:auto;height:auto;min-width:0;background:transparent;box-shadow:none;border:none;border-radius:0;padding:0}
.inverted-brand-logo,.brand-logo,.brand-logo-image{background:transparent;border:none;box-shadow:none;padding:0}

@media (max-width:980px){
  .brand-logo-plain{min-width:96px;max-width:108px}
  .brand-wrap.compact-brand-wrap{gap:10px}
  .login-panel{border-radius:24px}
}

@media (max-width:640px){
  .super-brand-mark{width:108px;min-width:108px}
  .brand-logo-plain{min-width:88px;max-width:98px}
  .form-dev-note-bottom{font-size:11.5px;letter-spacing:.09em}
}


/* stage 21 login cleanup */
.login-copy-panel{justify-content:center;position:relative;overflow:hidden}
.login-copy-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;max-width:420px;margin:0 auto;padding:18px 0}
.login-copy-panel .login-eyebrow{margin-bottom:6px;padding:8px 14px;font-size:14px}
.login-copy-panel h1{margin:0;font-size:42px;line-height:1.08;letter-spacing:-.04em;max-width:11ch}
.login-copy-panel .login-ar-title{margin:4px 0 0;font-size:28px;line-height:1.35;font-weight:900}
.login-copy-tight{max-width:22ch;margin:0 auto;font-size:16px;line-height:1.8}
.refined-form-panel{padding:24px 22px 20px}
.refined-form-panel .login-brand{margin-bottom:12px}
.refined-form-panel .logo-stage.compact-logo-stage{margin-bottom:14px !important}
.super-login-card{padding:34px 30px 22px}
.super-login-brand{margin-bottom:16px;text-align:center}
.super-login-brand h1{margin:2px 0 8px;font-size:32px;line-height:1.18;letter-spacing:-.02em}
.super-login-brand .muted{max-width:28ch;margin:0 auto;line-height:1.75;font-size:15px}
.super-login-form{gap:14px;margin-top:6px}
.super-login-form input{padding-inline:16px}
.super-login-form button{margin-top:6px}
@media (max-width:980px){
  .login-copy-stack{max-width:360px;padding:8px 0 4px}
  .login-copy-panel h1{font-size:34px;max-width:10.5ch}
  .login-copy-panel .login-ar-title{font-size:24px}
  .login-copy-tight{font-size:14.5px;max-width:24ch}
}
@media (max-width:640px){
  .login-copy-stack{max-width:300px;gap:8px;padding:2px 0}
  .login-copy-panel h1{font-size:30px;max-width:10ch}
  .login-copy-panel .login-ar-title{font-size:21px}
  .login-copy-tight{font-size:13.5px;line-height:1.7;max-width:22ch}
  .super-login-card{padding:26px 20px 18px}
  .super-login-brand h1{font-size:27px}
  .super-login-brand .muted{font-size:14px}
}


/* stage 22 dashboard + login tidy */
.polished-top-actions{gap:10px}
.polished-top-actions .pill-client{max-width:220px}
.polished-top-actions .pill-branch{max-width:150px}
.login-copy-panel{justify-content:center;padding-block:24px}
.login-copy-stack{max-width:350px;gap:12px;padding:8px 0}
.login-copy-panel .login-eyebrow{padding:8px 14px;font-size:13px;letter-spacing:.11em}
.login-copy-panel h1{font-size:40px;line-height:1.06;max-width:9.25ch;text-wrap:balance}
.login-copy-panel .login-ar-title{margin-top:2px;font-size:26px;line-height:1.28}
.login-copy-tight{max-width:20ch;font-size:15px;line-height:1.85}
.refined-form-panel{padding:24px 24px 20px}
.refined-form-panel .login-brand{margin-bottom:14px}
.super-login-card{width:min(500px,100%);padding:30px 26px 20px}
.super-hero-logo-stage{width:min(200px,100%);margin:0 auto 12px}
.super-hero-logo-image{width:min(100%,170px) !important;max-height:58px !important}
.super-login-brand{margin-bottom:14px}
.super-login-brand h1{margin:0 0 6px;font-size:29px;line-height:1.16}
.super-login-brand .muted{max-width:24ch;font-size:14px;line-height:1.7}
.super-login-form{gap:12px;margin-top:4px}
.super-login-card .form-dev-note-bottom{margin-top:20px;padding-top:14px}
@media (max-width:980px){
  .login-copy-panel{padding-block:18px}
  .login-copy-stack{max-width:320px;gap:10px}
  .login-copy-panel h1{font-size:34px;max-width:9ch}
  .login-copy-panel .login-ar-title{font-size:22px}
  .login-copy-tight{font-size:14px;max-width:22ch}
}
@media (max-width:640px){
  .login-copy-panel{padding-block:10px}
  .login-copy-stack{max-width:280px;gap:8px;padding:0}
  .login-copy-panel h1{font-size:28px;max-width:9ch}
  .login-copy-panel .login-ar-title{font-size:20px;line-height:1.35}
  .login-copy-tight{font-size:13px;line-height:1.75;max-width:20ch}
  .super-login-card{padding:24px 18px 18px}
  .super-hero-logo-stage{width:min(170px,100%);margin:0 auto 10px}
  .super-hero-logo-image{width:min(100%,146px) !important;max-height:50px !important}
  .super-login-brand h1{font-size:25px}
  .super-login-brand .muted{font-size:13px}
}


/* stage 20 form + language cleanup */
.brand-copy{gap:4px}
.brand-meta-line{display:flex;flex-wrap:wrap;gap:6px}
.meta-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-label strong{display:block;font-size:16px;line-height:1.55}
.field-input{display:flex;justify-content:flex-start}
.translated-inline{direction:rtl}
.note-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:18px;align-items:start}
.form-note-card{padding:18px 18px 16px}
.form-note-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.form-note-title{margin:0;font-size:18px;line-height:1.35}
.form-note-sub{margin:4px 0 0;color:var(--muted);font-size:13px}
.note-label-box{padding-top:6px}
.note-input-wrap{margin:0}
.note-input-wrap textarea{min-height:116px;border-radius:18px}
.login-copy-panel{padding:22px 20px;justify-content:center}
.login-copy-stack{max-width:310px;gap:10px;padding:0}
.login-copy-panel .login-eyebrow{margin-bottom:2px}
.login-copy-panel h1{font-size:34px;line-height:1.08;max-width:8.8ch;text-align:center}
.login-copy-panel .login-ar-title{font-size:24px;line-height:1.3;text-align:center}
.login-copy-tight{max-width:24ch;font-size:14px;line-height:1.8;text-align:center}
@media (max-width: 980px){
  .brand{font-size:15px}
  .note-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .brand-logo-plain{min-width:84px;max-width:92px}
  .brand-wrap.compact-brand-wrap{gap:8px;align-items:center}
  .brand{font-size:14px;line-height:1.2}
  .brand-sub{font-size:11.5px}
  .brand-user-name{font-size:11px}
  .brand-meta-line{gap:4px}
  .field-row{padding:14px;border-radius:18px}
  .field-label strong{font-size:15px}
  .field-label small{font-size:12px}
  .field-input{justify-content:flex-start}
  .choice-chip{min-width:82px;padding:10px 12px}
  .form-note-card{padding:16px 14px}
  .form-note-title{font-size:17px}
  .login-copy-panel{padding:14px 14px}
  .login-copy-stack{max-width:250px;gap:8px}
  .login-copy-panel h1{font-size:28px;max-width:8.8ch}
  .login-copy-panel .login-ar-title{font-size:20px}
  .login-copy-tight{font-size:13px;max-width:20ch}
}


/* stage 23 public client feedback */
.public-feedback-box{margin-top:14px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:20px;background:#f8fafc;display:grid;gap:12px}
.public-feedback-box .muted{margin:4px 0 0;font-size:13px;line-height:1.7}
.public-feedback-actions{display:flex;flex-wrap:wrap;gap:8px}
.public-feedback-actions-bottom{margin-top:12px;justify-content:center}
.soft-action{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:800;font-size:13px}
.soft-action:hover{background:#f3f6fb}
.client-feedback-stats{margin-bottom:14px}
.client-feedback-list{display:grid;gap:12px}
.client-feedback-card{padding:16px;border:1px solid var(--line);border-radius:20px;background:#fff}
.client-feedback-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.client-feedback-head strong{display:block;font-size:16px;line-height:1.45}
.client-feedback-head small{display:block;margin-top:3px;color:var(--muted)}
.client-feedback-message{margin:0 0 10px;line-height:1.9;white-space:pre-wrap}
.client-feedback-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px;color:var(--muted);font-size:12px}
.client-feedback-form{display:grid;grid-template-columns:160px minmax(0,1fr) 120px;gap:10px}
.client-feedback-form input,.client-feedback-form select{margin:0}
@media (max-width:900px){.client-feedback-form{grid-template-columns:1fr}.client-feedback-head{flex-direction:column}.public-feedback-box{padding:12px}.soft-action{flex:1 1 140px}}


/* stage 24 login + client feedback polish */
.stacked-brand-wrap{flex-direction:column;align-items:center;text-align:center;padding-top:2px}
.stacked-brand-wrap .brand-logo-plain{margin-inline:auto}
.stacked-brand-wrap .brand-copy{align-items:center;text-align:center;width:100%}
.stacked-brand-wrap .brand,.stacked-brand-wrap .brand-sub,.stacked-brand-wrap .brand-user-name{max-width:100%;white-space:normal;overflow:visible;text-overflow:unset}
.login-copy-logo-stage{width:min(210px,100%);margin:0 auto 8px}
.login-copy-logo-stage .refined-logo-image{width:min(100%,170px)!important;max-height:62px!important}
.login-hero-feedback{width:min(100%,440px);margin-top:10px;background:#fbfcfe}
.login-hero-feedback .public-feedback-copy{text-align:center}
.login-hero-feedback-actions{justify-content:center}
.client-feedback-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.focus-link-box{text-decoration:none;color:inherit}
.focus-link-box:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.06)}
.client-feedback-card-actions{display:flex;justify-content:flex-end;margin:0 0 12px}
.client-feedback-page{display:grid;gap:18px}
.client-feedback-toolbar{padding:18px 20px;border-radius:24px}
.client-feedback-filter-row{display:flex;flex-wrap:wrap;gap:10px}
.client-feedback-filter-row .soft-action{background:#fff}
.client-feedback-filter-row .soft-action.is-active{background:#111827;color:#fff;border-color:#111827}
.client-feedback-filter-row .soft-action strong{margin-inline-start:6px}
.client-feedback-list-full{grid-template-columns:1fr}
.client-feedback-detail-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:18px}
.client-feedback-detail-card{padding:22px}
.client-feedback-detail-side{padding:22px;border-radius:28px}
.full-message-box{margin-top:18px;padding:18px 20px}
.feedback-back-link{margin-top:12px;width:100%}
@media (max-width:980px){.client-feedback-detail-grid{grid-template-columns:1fr}.stacked-brand-wrap{align-items:center}.client-feedback-head-actions{justify-content:flex-start}}
@media (max-width:640px){.login-hero-feedback{margin-top:8px}.login-hero-feedback-actions .soft-action{flex:1 1 100%}.client-feedback-filter-row .soft-action{flex:1 1 100%}.stacked-brand-wrap .brand{font-size:14px;line-height:1.35}}


/* stage 21 right panel cleanup */
.login-copy-panel .login-copy-stack{
  max-width: 360px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
.login-copy-panel .login-copy-logo-stage{display:none !important;}
.login-title-vertical{
  margin: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  line-height:1.02;
  letter-spacing:-0.03em;
}
.login-title-vertical span{
  display:block;
}
.login-copy-panel .login-eyebrow{
  margin:0 0 6px;
}
.login-copy-panel .login-ar-title{
  margin:6px 0 0;
}
.login-copy-panel .login-copy-tight{
  max-width: 28ch;
  margin: 0 auto;
}
.login-hero-feedback{
  width:100%;
  margin-top:10px;
}
.login-hero-feedback .public-feedback-copy p{
  margin-bottom:10px;
}
@media (max-width: 980px){
  .login-copy-panel .login-copy-stack{max-width:300px;gap:8px;}
  .login-title-vertical{font-size:44px;}
}

/* studio v2 phase 1 */
.studio-v2-grid-gap{gap:18px}
.studio-v2-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px;align-items:start}
.studio-launchpad{display:grid;gap:10px}
.form-grid-tight{gap:12px}
.full-span{grid-column:1/-1}
.studio-template-list{display:grid;gap:12px}
.studio-template-row,.studio-audit-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:20px;background:#fff}
.studio-template-card{padding:18px;border:1px solid var(--line);border-radius:24px;background:#fff;display:grid;gap:12px}
.studio-template-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.studio-template-card h3{margin:0 0 4px}
.studio-template-metrics{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.studio-metric-bar{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--muted);font-size:13px}
.studio-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.studio-inline-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.studio-inline-actions form,.studio-card-actions form{margin:0}
.studio-inline-actions button,.studio-card-actions button{padding:8px 12px;border-radius:999px}
.studio-audit-list{display:grid;gap:10px}
.studio-audit-item strong{display:block}
.studio-preview-groups{gap:14px}
.studio-group-card{padding:16px;border:1px solid var(--line);border-radius:22px;background:#fff;display:grid;gap:12px}
.studio-group-card h4{margin:0}
.studio-preview-field{padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:#f9fbff;display:grid;gap:4px}
.studio-phone-preview{overflow:hidden}
.studio-phone-shell{max-width:360px;margin:0 auto;padding:14px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);display:grid;gap:14px}
.studio-phone-head{display:grid;gap:3px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.studio-phone-section{display:grid;gap:10px}
.studio-phone-section-title{font-weight:800;font-size:13px;color:var(--muted)}
.studio-phone-field{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff}
@media (max-width:980px){
  .studio-v2-hero{grid-template-columns:1fr}
  .studio-template-row,.studio-template-card-head,.studio-phone-field,.studio-audit-item{flex-direction:column;align-items:stretch}
  .studio-template-metrics{justify-content:flex-start}
}

/* Studio v3 / builder rebuild */
.studio-shell-v3{display:grid;gap:18px}
.studio-head-v3{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:start}
.studio-head-v3.compact{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
.studio-head-copy h2{margin:8px 0 10px;font-size:30px;letter-spacing:-.03em;line-height:1.15}
.studio-head-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.action-pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#0f172a;color:#fff;text-decoration:none;font-weight:800;border:1px solid #0f172a}
.action-pill.secondary{background:#fff;color:#0f172a;border-color:var(--line)}
.studio-head-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-mini-stat{padding:16px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff 0%,#f9fbff 100%);display:grid;gap:4px}
.studio-mini-stat span{color:var(--muted);font-size:13px}
.studio-mini-stat strong{font-size:32px;line-height:1;font-weight:900;color:#0f172a}
.studio-mini-stat small{color:var(--muted);font-size:12px}
.studio-flow-card,.studio-module-card{display:grid;gap:14px}
.studio-flow-list{display:grid;gap:12px}
.studio-flow-step{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:#fff}
.studio-flow-step span{width:42px;height:42px;border-radius:14px;background:#0f172a;color:#fff;display:grid;place-items:center;font-weight:900}
.studio-flow-step small{display:block;margin-top:4px;color:var(--muted)}
.studio-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-module-tile{padding:16px;border-radius:22px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;display:grid;gap:6px}
.studio-module-tile strong{font-size:17px}
.studio-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.studio-template-list.advanced{gap:10px}
.rich-row{align-items:center}
.studio-card-actions.compact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.studio-card-actions.split{justify-content:space-between}
.studio-card-actions .prominent{font-weight:900}
.builder-card{gap:14px}
.builder-grid-v2{display:grid;grid-template-columns:300px minmax(0,1fr) 360px;gap:18px;align-items:start}
.builder-column{display:grid;gap:14px;position:sticky;top:10px}
.builder-canvas-col{position:static}
.compact-form{gap:10px}
.builder-outline{display:grid;gap:10px}
.builder-outline-item{padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px}
.builder-canvas{display:grid;gap:14px}
.builder-section-card{padding:16px;border:1px solid var(--line);border-radius:24px;background:#f9fbff;display:grid;gap:12px}
.builder-section-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.builder-field-list{display:grid;gap:10px}
.builder-field-card{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff}
.builder-field-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.builder-side-note{padding:14px;border:1px dashed var(--line);border-radius:18px;background:#fcfdff;display:grid;gap:4px;color:var(--muted)}
.readonly-box.slim{padding:10px 12px}
.check-inline{margin-top:28px}
@media (max-width:1200px){.builder-grid-v2{grid-template-columns:1fr}.builder-column{position:static}.studio-head-v3,.studio-head-v3.compact{grid-template-columns:1fr}.studio-module-grid{grid-template-columns:1fr}}


/* Studio visible phase polish */
.studio-shell-v3{max-width:1440px;margin:0 auto;gap:16px}
.studio-top-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.studio-tab-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#0f172a;text-decoration:none;font-weight:800}
.studio-tab-link.active{background:#0f172a;color:#fff;border-color:#0f172a}
.studio-head-v3,.studio-head-v3.compact{grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:14px;padding:20px 22px}
.studio-head-copy h2{margin:6px 0 8px;font-size:28px}
.studio-head-copy p{max-width:900px}
.studio-head-actions{margin-top:12px;gap:8px}
.action-pill{padding:9px 14px}
.studio-side-panel{padding:16px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%);display:grid;gap:12px}
.studio-side-panel h3,.studio-side-panel h4{margin:0}
.studio-side-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.studio-side-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.studio-side-list li span{color:var(--muted);font-size:13px}
.studio-summary-strip{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.studio-summary-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#0f172a;font-size:13px;font-weight:700}
.studio-summary-chip strong{font-size:13px;font-weight:900}
.studio-summary-strip.muted .studio-summary-chip{background:#f8fbff}
.studio-head-grid.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.studio-mini-stat.compact{padding:12px 14px;border-radius:18px}
.studio-mini-stat.compact strong{font-size:22px}
.studio-mini-stat.compact small{display:none}
.studio-module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.studio-module-tile{padding:14px 15px;border-radius:18px}
.studio-flow-step{padding:10px 12px;border-radius:16px}
.studio-flow-step span{width:36px;height:36px;border-radius:12px}
.studio-template-card.builder-card{border-radius:22px;gap:10px}
.studio-card-actions.split{justify-content:flex-start;gap:8px 10px}
.builder-shell .studio-head-v3,.builder-shell .studio-head-v3.compact{grid-template-columns:minmax(0,1fr) 300px}
.builder-grid-v2{grid-template-columns:260px minmax(0,1fr) 320px;gap:16px}
.builder-column{gap:12px}
.builder-outline-item,.builder-field-card,.builder-section-card{border-radius:16px}
.builder-section-card{background:#fbfdff}
.builder-section-head{align-items:center}
.builder-field-card{padding:12px 13px}
.builder-field-actions{gap:6px}
.builder-side-note{border-radius:16px}
.compact-form label{display:grid;gap:6px}
.studio-simple-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.studio-clean-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.studio-clean-panel{display:grid;gap:12px}
.studio-clean-panel .section-head{margin-bottom:0}
.studio-list-clean{display:grid;gap:10px}
.studio-list-clean .studio-template-row,.studio-list-clean .studio-audit-item{padding:12px 14px;border-radius:16px}
@media (max-width:1200px){
  .studio-simple-split,.builder-shell .studio-head-v3,.builder-shell .studio-head-v3.compact,.studio-head-v3,.studio-head-v3.compact{grid-template-columns:1fr}
  .builder-grid-v2{grid-template-columns:1fr}
}
@media (max-width:780px){
  .studio-clean-grid,.studio-module-grid{grid-template-columns:1fr}
  .studio-head-v3,.studio-head-v3.compact{padding:16px}
  .studio-head-copy h2{font-size:24px}
}

.builder-open-grid{display:grid;grid-template-columns:280px minmax(0,1fr) 420px;gap:18px;align-items:start}
.builder-column-narrow{position:sticky;top:18px}
.builder-column-wide textarea{min-height:88px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.builder-palette{margin-top:16px;padding:14px;border:1px solid rgba(0,0,0,.06);border-radius:18px;background:#faf8f3}
.palette-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.palette-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);font-size:.85rem;color:#3d3127}
.open-canvas{display:flex;flex-direction:column;gap:18px}
.open-section-card{padding:16px;border-radius:22px;background:#fcfbf8;border:1px solid rgba(0,0,0,.06)}
.builder-block-card{margin-top:14px;padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.06)}
.builder-block-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.builder-field-card.width-half,.builder-field-card.width-third,.builder-field-card.width-quarter{border-left:4px solid #d8c4a2}
.builder-field-card .muted.small{line-height:1.45}
.builder-shell-open .builder-field-actions form{display:inline}
.card-like{box-shadow:none}
@media (max-width: 1200px){.builder-open-grid{grid-template-columns:1fr}.builder-column-narrow{position:static}}


/* Studio Phase 2 */
.builder-phase2-grid{grid-template-columns:290px minmax(0,1fr) 430px;gap:18px}
.phase2-sidebar .builder-outline-item{cursor:grab}
.builder-outline-copy{display:grid}
.drag-handle{font-size:18px;line-height:1;color:#9b7d52;user-select:none;cursor:grab;display:inline-flex;align-items:center;justify-content:center;min-width:18px}
.builder-section-head-main,.builder-block-head-main,.builder-field-headline{display:flex;align-items:flex-start;gap:10px}
.draggable-item{transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease}
.draggable-item.dragging{opacity:.45;transform:scale(.99);box-shadow:0 10px 20px rgba(0,0,0,.08)}
.builder-block-stack,.builder-field-list,.builder-canvas{display:grid;gap:12px}
.builder-block-card.layout-highlight{background:#faf6ef;border-color:#d8c4a2}
.builder-block-card.layout-two-column .builder-field-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.builder-block-card.layout-three-column .builder-field-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.builder-field-main{display:grid;gap:4px}
.builder-field-card{cursor:grab}
.hidden{display:none!important}
.phase2-note{background:#fff9ee;border-style:solid}
.palette-grid-phase2 .palette-pill{font-size:12px}
@media (max-width: 1280px){.builder-phase2-grid{grid-template-columns:1fr}.phase2-sidebar{position:static}}

.studio-preview-field form{margin-top:8px}.studio-preview-field button{width:auto;padding:8px 12px;border-radius:10px}

/* Studio Phase 4 runtime renderer */
.studio-runtime-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start}
.studio-runtime-canvas{display:grid;gap:16px;margin-top:16px}
.studio-runtime-section{display:grid;gap:14px}
.studio-runtime-blocks{display:grid;gap:14px}
.studio-runtime-block{padding:14px;border:1px solid rgba(0,0,0,.07);border-radius:18px;background:#fff}
.studio-runtime-block.layout-highlight{background:#fff9ee;border-color:#d8c4a2}
.studio-runtime-block-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;align-items:center}
.studio-runtime-fields{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:12px}
.studio-runtime-field{display:grid;gap:7px;padding:10px;border:1px solid rgba(0,0,0,.05);border-radius:14px;background:#fcfdff}
.studio-runtime-field.width-full{grid-column:1/-1}.studio-runtime-field.width-half{grid-column:span 1}.studio-runtime-field.width-third{grid-column:span 1}.studio-runtime-field.width-quarter{grid-column:span 1}
.studio-runtime-field.runtime-hidden{display:none!important}.studio-runtime-field.runtime-required{border-color:#d8c4a2;background:#fffdf8}
.required-dot{color:#b45309;font-weight:900;margin-inline-start:4px}.field-label small{display:block;color:var(--muted);font-weight:500;margin-top:3px}
.runtime-choice-group{display:flex;flex-wrap:wrap;gap:8px}.runtime-choice-group.wrap{align-items:flex-start}.choice-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid rgba(0,0,0,.08);border-radius:999px;background:#fff;cursor:pointer}
.studio-repeater{display:grid;gap:10px}.studio-repeater-row{display:grid;gap:8px;padding:10px;border:1px dashed rgba(0,0,0,.14);border-radius:14px;background:#fff}.studio-repeater-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.studio-repeater-row .repeater-remove{justify-self:start;width:auto;padding:8px 12px}
.studio-preview-live-grid{display:grid;grid-template-columns:minmax(0,1.25fr) 360px;gap:16px;margin-top:16px;align-items:start}.studio-phone-preview-v4{max-width:760px}.preview-only{display:grid;gap:12px}.preview-section{border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:12px;background:#fbfdff}.compact-flow .studio-flow-step{padding:9px 10px}.storage-health-row.ok{background:#f4fff7}.storage-health-row.bad{background:#fff7f5}
@media (max-width: 980px){.studio-runtime-head,.studio-preview-live-grid{grid-template-columns:1fr}.studio-runtime-fields{grid-template-columns:1fr!important}}

/* Phase 5 Visual Open Builder */
.visual-builder-shell{max-width:1680px}
.visual-builder-head{background:linear-gradient(135deg,#ffffff 0%,#fbf7ef 48%,#f8fafc 100%);border:1px solid rgba(15,23,42,.08)}
.visual-builder-status .studio-head-actions{margin-top:4px}
.visual-builder-grid{display:grid;grid-template-columns:310px minmax(0,1fr) 430px;gap:16px;align-items:start}
.visual-panel{border-radius:24px;border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 34px rgba(15,23,42,.05)}
.component-library-panel,.visual-side-stack{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}
.visual-side-stack{display:grid;gap:16px}
.compact-head{align-items:flex-start;margin-bottom:6px}.compact-head p{margin:4px 0 0}
.component-target-form{display:grid;gap:9px;padding:12px;border-radius:18px;background:#faf8f3;border:1px solid rgba(15,23,42,.06);margin:12px 0}
.component-target-form label{font-size:12px;color:#64748b}.component-target-form select,.component-target-form input{margin-top:5px}
.component-search-box input{border-radius:999px;background:#fff;border-color:rgba(15,23,42,.1)}
.component-category-stack{display:grid;gap:14px;margin-top:14px}.component-category-title{font-weight:900;font-size:13px;color:#475569;margin-bottom:8px}
.component-tile-list{display:grid;gap:8px}.component-tile{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;width:100%;text-align:start;padding:11px;border-radius:17px;background:#fff;border:1px solid rgba(15,23,42,.08);color:#0f172a;box-shadow:none}.component-tile:hover,.component-tile-picked{transform:translateY(-1px);border-color:#d8c4a2;background:#fffaf2}.component-icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:#fff;font-weight:900}.component-copy{display:grid;gap:2px}.component-copy strong{font-size:13px}.component-copy small{font-size:11px;color:#64748b;line-height:1.35}
.visual-mini-builder{background:#fff;margin-top:16px}
.visual-canvas-panel{min-height:680px;background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%)}
.visual-canvas{gap:16px}.visual-section-card{background:#f8fafc;border:1px solid rgba(15,23,42,.08);border-radius:26px;padding:16px}.visual-section-head{padding-bottom:12px;border-bottom:1px dashed rgba(15,23,42,.12)}
.visual-block-stack{gap:14px}.visual-block-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:22px;padding:14px}.visual-block-card.layout-highlight{background:#fff9ef;border-color:#d8c4a2}.visual-block-head{margin-bottom:12px}
.visual-field-list{min-height:48px}.visual-field-card{border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 24px rgba(15,23,42,.04)}.visual-field-card:hover{border-color:#d8c4a2}.visual-field-card.dragging,.visual-block-card.dragging,.visual-section-card.dragging{opacity:.45;outline:2px dashed #0f172a}.visual-field-actions form{display:inline}.visual-field-actions button{padding:7px 10px;border-radius:999px}.field-meta-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}.field-meta-row span{font-size:11px;background:#f1f5f9;color:#475569;border-radius:999px;padding:4px 7px}
.canvas-empty-drop{padding:14px;border:1px dashed rgba(15,23,42,.22);border-radius:16px;color:#64748b;background:#fbfdff;text-align:center;font-size:13px}
.inspector-panel textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.inspector-form{gap:10px}.advanced-details{border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:10px;background:#fbfdff}.advanced-details summary{cursor:pointer;font-weight:900;color:#0f172a;margin-bottom:8px}
.live-preview-panel{background:#fbfdff}.live-preview-frame{max-height:520px;overflow:auto}.live-preview-frame .studio-runtime-block{box-shadow:none}.live-preview-frame input,.live-preview-frame select,.live-preview-frame textarea{font-size:12px}.live-preview-frame .studio-runtime-field{padding:9px;border-radius:12px}
@media (max-width:1400px){.visual-builder-grid{grid-template-columns:1fr}.component-library-panel,.visual-side-stack{position:static;max-height:none}.visual-side-stack{grid-template-columns:1fr 1fr}.live-preview-frame{max-height:none}}
@media (max-width:900px){.visual-side-stack{grid-template-columns:1fr}.component-tile{grid-template-columns:32px 1fr}.component-icon{width:32px;height:32px;border-radius:12px}.visual-builder-grid{gap:12px}.visual-section-card,.visual-block-card{padding:12px}}

/* Phase 5.1 — Studio launcher UX polish */
.studio-launcher-page .studio-top-nav { margin-bottom: 14px; }
.studio-launch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef2ff 100%);
}
.studio-launch-copy h2 { margin: 12px 0 8px; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.35; color: #0f172a; }
.studio-launch-copy p { max-width: 880px; }
.studio-launch-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.studio-launch-steps span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-weight: 800;
  color: #334155;
}
.studio-launch-steps b {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
}
.studio-launch-actions { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.big-builder-action, .primary-builder-button, .open-builder-btn {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}
.launcher-grid { grid-template-columns: 1.08fr .92fr; align-items: stretch; }
.create-template-panel { border: 1px solid rgba(15, 23, 42, 0.10); }
.create-template-panel input, .create-template-panel textarea, .create-template-panel select,
.filter-template-panel input, .filter-template-panel select { min-height: 46px; }
.create-template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.primary-builder-button { min-height: 50px; padding-inline: 22px; font-weight: 900; }
.studio-template-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.visual-template-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid #e2e8f0;
}
.visual-template-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: #0f172a;
  opacity: .9;
}
.visual-template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .12);
  border-color: #cbd5e1;
}
.visual-template-stats span { display: inline-flex; gap: 5px; align-items: center; }
.visual-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.open-builder-btn { font-weight: 900; padding: 11px 15px; }
.visual-card-actions form { margin-inline-start: auto; }
@media (max-width: 980px) {
  .studio-launch-hero, .launcher-grid { grid-template-columns: 1fr; }
  .studio-launch-actions { min-width: 0; }
}

/* Phase 5.2 — Calm Open Builder UX */
.studio-calm{--studio-soft-bg:#f8fafc;--studio-card:#ffffff;--studio-line:#e6ebf2;--studio-muted:#64748b;--studio-ink:#0f172a;--studio-shadow:0 10px 26px rgba(15,23,42,.045)}
.studio-calm .card,.studio-calm .visual-panel{box-shadow:var(--studio-shadow);border-color:var(--studio-line)}
.studio-calm .studio-tab-link{padding:8px 12px;font-size:13px;background:#fff;border-color:#e6ebf2}.studio-calm .studio-tab-link.active{background:#0f172a;color:#fff}.studio-calm .soft-pill{background:#f8fafc;border:1px solid #e6ebf2;color:#475569;font-size:11px;padding:5px 9px}.studio-calm .muted-pill{background:#f1f5f9;color:#64748b}.calm-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;background:#fff;border-radius:24px}.calm-toolbar h2{margin:7px 0 6px;font-size:25px;letter-spacing:-.025em}.calm-toolbar p{margin:0;max-width:780px}.calm-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.studio-calm .action-pill{padding:8px 13px;font-size:13px;box-shadow:none}.studio-calm-grid{display:grid;gap:14px}.top-tools-grid{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:start}.calm-panel{border-radius:22px;background:#fff;padding:0;overflow:hidden}.calm-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;cursor:pointer;font-weight:900;color:#0f172a;list-style:none}.calm-summary::-webkit-details-marker{display:none}.calm-summary small{color:#64748b;font-weight:700}.calm-panel[open] .calm-summary{border-bottom:1px solid #edf2f7}.calm-form{padding:14px 16px}.calm-form label{font-size:12px;color:#475569;font-weight:800}.calm-form input,.calm-form select,.calm-form textarea{border-color:#e2e8f0;background:#fff;min-height:40px}.calm-form input:focus,.calm-form select:focus,.calm-form textarea:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.16)}.calm-template-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.calm-template-card{border-radius:22px;padding:16px;gap:10px}.calm-template-card::before{width:3px;background:#cbd5e1}.calm-template-card:hover{transform:none;box-shadow:0 12px 28px rgba(15,23,42,.075)}.calm-description{min-height:36px;font-size:13px}.calm-actions{margin-top:8px}.template-card-editor{border-top:1px solid #eef2f7;margin-top:8px;padding-top:8px}.template-card-editor>summary{cursor:pointer;color:#475569;font-size:12px;font-weight:900}.template-danger-row{display:grid;gap:8px;padding:0 0 2px}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input{min-height:38px;max-width:240px}.is-deleted{opacity:.62;background:#f8fafc}.is-deleted::before{background:#94a3b8}
.calm-builder-shell{max-width:1760px}.builder-topbar{padding:14px 18px}.builder-topbar h2{font-size:22px}.calm-summary-strip{gap:7px}.calm-summary-strip .studio-summary-chip{padding:7px 10px;font-size:12px;background:#f8fafc}.calm-visual-builder-grid{grid-template-columns:280px minmax(0,1fr) 390px;gap:14px}.calm-left-panel,.calm-right-panel{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto}.calm-left-panel{padding:14px}.calm-left-panel .section-head,.calm-canvas-panel .section-head,.calm-right-panel .section-head{margin-bottom:8px}.calm-left-panel p{margin-top:0}.studio-calm .component-target-form{background:#f8fafc;border-color:#e6ebf2;border-radius:16px;margin:10px 0;padding:10px}.studio-calm .component-tile{border-radius:15px;padding:10px;border-color:#e6ebf2}.studio-calm .component-icon{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}.studio-calm .component-tile:hover,.studio-calm .component-tile-picked{background:#f8fafc;border-color:#cbd5e1;transform:none}.studio-calm .component-category-stack{gap:12px}.studio-calm .component-category-title{font-size:12px;color:#64748b}.calm-builder-drawer{margin-top:12px;border:1px solid #e6ebf2;border-radius:18px;background:#fff}.block-create-form{border-top:1px solid #eef2f7}.calm-canvas-panel{background:#fff;min-height:700px;padding:16px;border-radius:24px}.canvas-title-row{border-bottom:1px solid #eef2f7;padding-bottom:10px}.studio-calm .visual-canvas{gap:12px}.studio-calm .visual-section-card{background:#f8fafc;border-color:#e6ebf2;border-radius:22px;padding:14px}.studio-calm .visual-section-head{border-bottom:1px solid #e8edf4;padding-bottom:10px}.studio-calm .visual-block-card{border-radius:18px;border-color:#e6ebf2;padding:12px;background:#fff}.studio-calm .visual-field-card{border-radius:15px;border-color:#e6ebf2;box-shadow:none;padding:11px}.studio-calm .visual-field-card:hover{border-color:#94a3b8}.calm-node-head{align-items:flex-start}.canvas-node-settings{position:relative}.canvas-node-settings>summary{cursor:pointer;list-style:none;border:1px solid #e2e8f0;border-radius:999px;background:#fff;padding:6px 10px;font-size:12px;font-weight:900;color:#475569}.canvas-node-settings>summary::-webkit-details-marker{display:none}.canvas-node-settings[open]>summary{background:#0f172a;color:#fff;border-color:#0f172a}.canvas-node-settings[open]{z-index:30}.canvas-node-settings[open] form,.canvas-node-settings[open] .calm-form{min-width:260px}.canvas-node-settings>form,.canvas-node-settings .calm-form{margin-top:8px;background:#fff;border:1px solid #e6ebf2;border-radius:16px;box-shadow:0 18px 44px rgba(15,23,42,.14)}.canvas-node-settings form + form{margin-top:8px}.block-settings-drawer[open] form{min-width:280px}.field-meta-row span{background:#f8fafc;color:#64748b;border:1px solid #e6ebf2}.canvas-empty-drop{background:#fff;border-color:#cbd5e1;color:#64748b}.calm-inspector,.calm-preview-panel{padding:14px;border-radius:22px}.calm-inspector .calm-form{padding:0}.studio-calm .advanced-details{background:#f8fafc;border-color:#e6ebf2}.calm-preview-panel{background:#fff}.studio-runtime-block.block-style-soft,.visual-block-card.block-style-soft{background:#fbfdff}.studio-runtime-block.block-style-outline,.visual-block-card.block-style-outline{background:#fff;border-style:dashed}.studio-runtime-block.block-style-critical,.visual-block-card.block-style-critical{background:#fff7ed;border-color:#fed7aa}.visual-block-card.block-style-card{box-shadow:0 12px 30px rgba(15,23,42,.06)}.visual-section-card.section-style-outline{background:#fff;border-style:dashed}.visual-section-card.section-style-soft{background:#fbfdff}.visual-section-card.section-style-critical{background:#fff7ed;border-color:#fed7aa}.drag-handle{color:#94a3b8;cursor:grab;user-select:none}.destructive{background:#991b1b!important;color:#fff!important;border-color:#991b1b!important}
@media (max-width:1400px){.calm-visual-builder-grid{grid-template-columns:1fr}.calm-left-panel,.calm-right-panel{position:static;max-height:none}.calm-right-panel{grid-template-columns:1fr 1fr}.top-tools-grid{grid-template-columns:1fr}.calm-toolbar{grid-template-columns:1fr}.calm-toolbar-actions{justify-content:flex-start}}
@media (max-width:900px){.calm-right-panel{grid-template-columns:1fr}.calm-template-grid{grid-template-columns:1fr}.inline-form input{max-width:100%}}


/* Phase 5.3 — calmer Studio Builder + Photo Rules */
:root{
  --studio-calm-bg:#f7f8fb;
  --studio-calm-card:#ffffff;
  --studio-calm-line:#e7ebf2;
  --studio-calm-ink:#111827;
  --studio-calm-muted:#6b7280;
}
.studio-builder-shell,
.studio-builder-layout,
.visual-builder-page{
  background:var(--studio-calm-bg);
}
.visual-panel,
.template-card,
.studio-runtime-section,
.studio-runtime-block,
.live-preview-frame{
  border-color:var(--studio-calm-line)!important;
  box-shadow:0 14px 36px rgba(15,23,42,.045)!important;
}
.visual-section-card,
.visual-block-card,
.visual-field-card{
  border-color:var(--studio-calm-line)!important;
  box-shadow:none!important;
}
.component-tile{
  box-shadow:none!important;
  border-color:var(--studio-calm-line)!important;
}
.component-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
}
.inspector-form input,
.inspector-form select,
.inspector-form textarea{
  border-color:var(--studio-calm-line);
  background:#fff;
}
.photo-rule-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid #dbeafe;
  border-radius:20px;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
}
.photo-rule-panel-hidden{display:none!important}
.photo-rule-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.photo-rule-panel-head strong{font-size:15px;color:#0f172a}
.photo-rule-panel-head span{font-size:12px;color:#64748b}
.photo-rule-options{display:flex;flex-wrap:wrap;gap:10px}
.photo-rules-widget{
  border:1px solid var(--studio-calm-line);
  border-radius:20px;
  padding:12px;
  background:#fff;
}
.photo-rules-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #edf2f7;
  color:#334155;
}
.photo-rules-summary span{font-size:13px;color:#64748b}
.photo-rules-summary strong{font-size:14px;color:#0f172a}
.photo-rules-summary small{font-size:12px;color:#64748b}
.photo-preview-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 14px;
  border:1px dashed #cbd5e1;
  border-radius:18px;
  background:#f8fafc;
}
.photo-preview-box span{color:#64748b;font-size:13px}
.photo-preview-box strong{color:#0f172a;font-size:13px}
.camera-actions-row .camera-btn{
  background:#0f172a;
  min-height:48px;
  border-radius:16px;
}
.camera-status{color:#64748b}
.camera-gallery{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.camera-thumb{border-radius:18px;box-shadow:0 8px 20px rgba(15,23,42,.06)}

/* Phase 5.4 — OCS Flow Builder calm workspace */
.ocs-flow-builder{--flow-bg:#f6f5f1;--flow-surface:#fff;--flow-card:#fbfaf7;--flow-line:#e8e2d8;--flow-line-strong:#d8cfbf;--flow-text:#191815;--flow-muted:#7b7368;--flow-soft:#f0ebe2;--flow-accent:#111;--flow-radius:20px;min-height:calc(100vh - 110px);margin:-4px -2px 0;color:var(--flow-text)}
.ocs-flow-builder *{box-sizing:border-box}.flow-appbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;margin-bottom:10px;border:1px solid var(--flow-line);border-radius:24px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);position:sticky;top:12px;z-index:40;box-shadow:0 18px 45px rgba(38,30,16,.06)}
.flow-title-zone{display:flex;align-items:center;gap:14px;min-width:0}.flow-title-zone h2{margin:0;font-size:1.15rem;letter-spacing:-.02em;color:var(--flow-text)}.flow-title-zone p{margin:3px 0 0;color:var(--flow-muted);font-size:.82rem}.flow-product-badge{display:inline-flex;align-items:center;justify-content:center;min-width:84px;height:36px;border-radius:999px;background:#111;color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.02em}.flow-app-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.flow-btn,.flow-app-actions a.flow-btn,.flow-mini-form .flow-btn{border:1px solid var(--flow-line);background:var(--flow-surface);color:var(--flow-text);border-radius:14px;padding:9px 13px;font-weight:800;font-size:.82rem;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.16s ease;box-shadow:none}.flow-btn:hover{border-color:#111;transform:translateY(-1px)}.flow-btn.primary{background:#111;color:#fff;border-color:#111}.flow-btn.ghost{background:transparent}.flow-btn.danger{background:#fff5f5;color:#9b1c1c;border-color:#f1c5c5}.flow-btn.full{width:100%}.flow-mini-link{font-size:.78rem;color:#111;text-decoration:none;border:1px solid var(--flow-line);border-radius:999px;padding:5px 10px;background:#fff}
.flow-metrics-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:0 2px}.flow-metrics-strip span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--flow-line);background:rgba(255,255,255,.8);border-radius:999px;padding:7px 11px;color:var(--flow-muted);font-size:.79rem}.flow-metrics-strip strong{color:#111;font-size:.9rem}.flow-workspace{display:grid;grid-template-columns:minmax(250px,285px) minmax(480px,1fr) minmax(310px,350px);gap:12px;align-items:start;height:calc(100vh - 228px);min-height:720px}.flow-sidebar,.flow-canvas-shell,.flow-inspector-shell{min-height:0}.flow-sidebar,.flow-inspector-card,.flow-preview-card,.flow-canvas-shell{border:1px solid var(--flow-line);background:rgba(255,255,255,.9);border-radius:24px;box-shadow:0 22px 55px rgba(43,35,22,.05);overflow:hidden}.flow-sidebar{height:100%;display:flex;flex-direction:column;padding:12px}.flow-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 2px 12px}.flow-panel-head strong{display:block;font-size:.98rem;color:#111}.flow-panel-head small{display:block;margin-top:2px;color:var(--flow-muted);font-size:.74rem;line-height:1.45}
.flow-target-box,.flow-mini-form,.flow-inspector-form{display:grid;gap:9px}.flow-target-box{border:1px solid var(--flow-line);background:var(--flow-card);border-radius:18px;padding:10px;margin-bottom:10px}.flow-target-box label,.flow-mini-form label,.flow-inspector-form label{display:grid;gap:5px;font-size:.75rem;color:var(--flow-muted);font-weight:800}.flow-target-box input,.flow-target-box select,.flow-mini-form input,.flow-mini-form select,.flow-inspector-form input,.flow-inspector-form select,.flow-inspector-form textarea,.flow-search input{width:100%;border:1px solid var(--flow-line);border-radius:12px;padding:9px 10px;background:#fff;color:#111;font:inherit;outline:none;min-height:38px}.flow-target-box input:focus,.flow-target-box select:focus,.flow-mini-form input:focus,.flow-mini-form select:focus,.flow-inspector-form input:focus,.flow-inspector-form select:focus,.flow-inspector-form textarea:focus,.flow-search input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.06)}.flow-search{margin-bottom:10px}.flow-search input{border-radius:16px;background:#fbfaf7}.flow-component-list{overflow:auto;display:grid;gap:12px;padding:2px 2px 12px;scrollbar-width:thin}.flow-category-title{font-size:.72rem;color:var(--flow-muted);font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin:0 4px 7px}.flow-tiles{display:grid;gap:7px}.flow-tile{display:flex;align-items:center;gap:9px;width:100%;border:1px solid transparent;background:transparent;text-align:start;border-radius:16px;padding:9px;color:#111;cursor:pointer;transition:.15s ease}.flow-tile:hover,.flow-tile.component-tile-picked{background:#111;color:#fff;transform:translateY(-1px)}.flow-tile-icon{width:34px;height:34px;border-radius:12px;background:var(--flow-soft);display:grid;place-items:center;flex:0 0 auto;font-size:1rem}.flow-tile:hover .flow-tile-icon{background:rgba(255,255,255,.16)}.flow-tile strong{display:block;font-size:.82rem}.flow-tile small{display:block;margin-top:2px;color:inherit;opacity:.65;font-size:.7rem;line-height:1.35}
.flow-drawer{border-top:1px solid var(--flow-line);padding-top:10px;margin-top:auto}.flow-drawer summary{list-style:none;cursor:pointer;border:1px dashed var(--flow-line-strong);border-radius:16px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;font-weight:900}.flow-drawer summary::-webkit-details-marker{display:none}.flow-drawer small{color:var(--flow-muted);font-size:.72rem}.flow-drawer .flow-mini-form{margin-top:10px;border:1px solid var(--flow-line);border-radius:18px;background:var(--flow-card);padding:10px}.flow-canvas-shell{height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#fbfaf6)}.flow-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--flow-line);background:rgba(255,255,255,.92)}.flow-canvas-toolbar strong{display:block;font-size:1rem}.flow-canvas-toolbar small{display:block;color:var(--flow-muted);font-size:.75rem;margin-top:2px}.flow-segment{display:flex;gap:5px;background:var(--flow-soft);border-radius:999px;padding:4px;border:1px solid var(--flow-line)}.flow-segment a{text-decoration:none;color:var(--flow-muted);font-size:.77rem;font-weight:900;padding:7px 10px;border-radius:999px}.flow-segment a.active,.flow-segment a:hover{background:#fff;color:#111;box-shadow:0 6px 18px rgba(28,22,12,.07)}.flow-canvas-surface{overflow:auto;min-height:0;flex:1;padding:22px;background-image:radial-gradient(rgba(18,18,18,.08) 1px,transparent 1px);background-size:22px 22px}.flow-section{background:rgba(255,255,255,.93);border:1px solid var(--flow-line);border-radius:24px;padding:12px;margin:0 0 16px;box-shadow:0 16px 40px rgba(39,31,17,.06)}
.flow-node-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.flow-node-title{display:flex;align-items:center;gap:9px;min-width:0}.flow-node-title strong{display:block;color:#111;font-size:.94rem}.flow-node-title small{display:block;color:var(--flow-muted);font-size:.73rem;margin-top:2px}.flow-drag{color:#aaa;font-weight:900;cursor:grab;line-height:1}.flow-node-menu{position:relative}.flow-node-menu summary{list-style:none;cursor:pointer;width:34px;height:30px;border:1px solid var(--flow-line);border-radius:12px;background:#fff;display:grid;place-items:center;font-size:1.1rem;line-height:1}.flow-node-menu summary::-webkit-details-marker{display:none}.flow-node-menu[open] summary{background:#111;color:#fff;border-color:#111}.flow-node-menu[open] > form,.flow-node-menu[open] > .flow-mini-form{position:absolute;top:36px;left:0;z-index:60;width:260px;background:#fff;border:1px solid var(--flow-line);border-radius:18px;padding:12px;box-shadow:0 20px 60px rgba(22,18,12,.16)}.flow-node-menu[open] > form + form{top:auto;margin-top:8px;position:relative;box-shadow:none;width:260px;border:0;padding:0;background:transparent}.flow-block-stack{display:grid;gap:10px}.flow-block{border:1px solid var(--flow-line);background:#fbfaf7;border-radius:20px;padding:10px}.flow-block.block-style-alert{background:#fff8ed;border-color:#f0cf9b}.flow-block.block-style-outline{background:#fff}.flow-block.block-style-soft{background:#f7f3ea}.flow-block.block-style-card{box-shadow:0 14px 32px rgba(35,27,14,.06)}
.flow-field-list{display:grid;gap:8px}.flow-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;background:#fff;border:1px solid var(--flow-line);border-radius:16px;padding:9px 10px;transition:.15s ease}.flow-field:hover{border-color:#111;box-shadow:0 10px 28px rgba(24,20,13,.08)}.flow-field-info{display:flex;align-items:center;gap:9px;min-width:0}.flow-field-info strong{display:block;font-size:.86rem}.flow-field-info small{display:block;color:var(--flow-muted);font-size:.7rem;margin-top:2px}.flow-field-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.flow-field-chips span{border:1px solid var(--flow-line);background:var(--flow-card);border-radius:999px;padding:4px 7px;font-size:.66rem;color:var(--flow-muted);font-weight:800}.flow-field-actions{grid-column:1/-1;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;border-top:1px solid var(--flow-line);padding-top:8px;margin-top:2px}.flow-field-actions form{display:inline}.flow-field-actions button,.flow-field-actions a{border:1px solid var(--flow-line);background:#fff;border-radius:10px;padding:5px 8px;font-size:.7rem;font-weight:800;text-decoration:none;color:#111;cursor:pointer}.flow-field-actions .destructive{color:#9b1c1c;background:#fff5f5;border-color:#f1c5c5}.flow-empty-drop{border:1px dashed var(--flow-line-strong);background:rgba(255,255,255,.68);border-radius:16px;padding:16px;text-align:center;color:var(--flow-muted);font-size:.82rem}.flow-empty-state{display:grid;place-items:center;min-height:260px;gap:5px}
.flow-inspector-shell{height:100%;display:grid;grid-template-rows:minmax(0,1.3fr) minmax(230px,.7fr);gap:12px}.flow-inspector-card,.flow-preview-card{min-height:0;display:flex;flex-direction:column;padding:12px}.flow-inspector-form{overflow:auto;padding:2px 2px 10px;scrollbar-width:thin}.flow-inspector-form details{border:1px solid var(--flow-line);border-radius:16px;padding:10px;background:var(--flow-card)}.flow-inspector-form details + details{margin-top:2px}.flow-inspector-form summary{cursor:pointer;font-weight:900;color:#111}.flow-inspector-form details label{margin-top:8px}.flow-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important;color:#111!important}.flow-check input{width:auto!important;min-height:0!important}.flow-photo-panel{border:1px solid #dccfb7;background:#fffaf0;border-radius:18px;padding:12px;display:grid;gap:8px}.flow-photo-panel > div strong{display:block}.flow-photo-panel > div small{display:block;color:var(--flow-muted);font-size:.72rem}.photo-rule-panel-hidden{display:none!important}.flow-preview-card{overflow:hidden}.flow-phone{overflow:auto;border:1px solid var(--flow-line);background:#f9f7f2;border-radius:22px;padding:12px;min-height:0;flex:1}.flow-phone:before{content:"Preview";display:block;text-align:center;color:var(--flow-muted);font-size:.7rem;font-weight:900;margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}.ocs-flow-builder .hidden{display:none!important}.ocs-flow-builder .studio-runtime-block,.ocs-flow-builder .preview-section{border-radius:16px}.ocs-flow-builder .readonly-box{border-radius:18px}
@media (max-width:1280px){.flow-workspace{grid-template-columns:250px minmax(420px,1fr) 310px}.flow-appbar{align-items:flex-start}.flow-app-actions{max-width:520px}}@media (max-width:1020px){.flow-workspace{height:auto;grid-template-columns:1fr}.flow-sidebar,.flow-canvas-shell,.flow-inspector-shell{height:auto}.flow-inspector-shell{grid-template-rows:auto auto}.flow-appbar{position:relative;top:auto;flex-direction:column;align-items:stretch}.flow-app-actions{justify-content:flex-start}.flow-canvas-surface{max-height:none}.flow-sidebar{max-height:none}.flow-component-list{max-height:360px}}

/* =========================================================
   Phase 6 — OCS Studio Lite / Calm Professional
   Ultra-calm builder experience: add panel + form canvas + simple settings.
   ========================================================= */
.studio-lite{
  --lite-bg:#f5f1ea;
  --lite-panel:#fffefb;
  --lite-canvas:#ece4d8;
  --lite-soft:#f1ece3;
  --lite-line:#e3d8ca;
  --lite-ink:#201d19;
  --lite-muted:#7c7368;
  --lite-accent:#24221f;
  color:var(--lite-ink);
}
.studio-lite *{box-sizing:border-box}
.lite-hero{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px; margin-bottom:14px;
  border:1px solid var(--lite-line); border-radius:34px;
  background:rgba(255,254,251,.88); box-shadow:0 20px 60px rgba(45,35,20,.06);
}
.lite-brand{display:flex; align-items:center; gap:14px; min-width:0}
.lite-logo{display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:18px; background:var(--lite-accent); color:#fff; font-weight:900; letter-spacing:.04em; flex:0 0 auto}
.lite-kicker{display:block; color:var(--lite-muted); font-size:12px; margin-bottom:3px}
.lite-brand h2{margin:0; font-size:22px; line-height:1.25}
.lite-brand p{margin:4px 0 0; color:var(--lite-muted); font-size:13px}
.lite-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lite-btn{display:inline-flex; min-height:38px; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border:1px solid var(--lite-line); border-radius:16px; background:#fff; color:var(--lite-ink); font-size:13px; text-decoration:none; cursor:pointer; transition:.16s ease}
.lite-btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(45,35,20,.07)}
.lite-btn.primary{background:var(--lite-accent); color:#fff; border-color:var(--lite-accent)}
.lite-btn.ghost{background:rgba(255,255,255,.72)}
.lite-btn.full{width:100%}
.lite-btn.danger{border-color:#e5b8b8; color:#9a2e2e; background:#fff7f7}
.lite-stats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:14px}
.lite-stats span{display:flex; align-items:center; justify-content:center; gap:6px; min-height:54px; border:1px solid var(--lite-line); border-radius:24px; background:rgba(255,254,251,.82); box-shadow:0 12px 30px rgba(45,35,20,.04)}
.lite-stats strong{font-size:20px}.lite-stats small{font-size:12px; color:var(--lite-muted)}
.lite-workspace{display:grid; grid-template-columns:310px minmax(0,1fr) 340px; gap:14px; align-items:start}
.lite-panel,.lite-canvas-wrap{border:1px solid var(--lite-line); border-radius:34px; background:rgba(255,254,251,.88); box-shadow:0 20px 60px rgba(45,35,20,.06)}
.lite-panel{padding:16px; position:sticky; top:92px}
.lite-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.lite-panel-head strong{display:block; font-size:15px}.lite-panel-head small{display:block; margin-top:3px; color:var(--lite-muted); font-size:12px}
.lite-mini-link{font-size:12px; color:var(--lite-muted); text-decoration:none}
.lite-search input,.lite-add-form input,.lite-add-form select,.lite-mini-form input,.lite-mini-form select,.lite-inspector-form input,.lite-inspector-form select,.lite-inspector-form textarea{
  width:100%; border:1px solid var(--lite-line); border-radius:16px; background:#fbf8f2; color:var(--lite-ink); padding:9px 11px; font:inherit; font-size:13px; outline:none;
}
.lite-search input:focus,.lite-mini-form input:focus,.lite-inspector-form input:focus,.lite-inspector-form select:focus,.lite-inspector-form textarea:focus{border-color:var(--lite-accent); background:#fff}
.lite-search{margin-bottom:14px}
.lite-component-category{margin-bottom:16px}.lite-category-title{font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--lite-muted); margin:0 4px 8px}
.lite-component-grid{display:grid; gap:8px}
.lite-component-tile{display:flex; align-items:center; gap:10px; width:100%; padding:11px; border:1px solid var(--lite-line); border-radius:22px; background:#fff; color:var(--lite-ink); text-align:right; cursor:pointer; transition:.16s ease}
.lite-component-tile:hover,.lite-component-tile.component-tile-picked{border-color:#c9bbaa; transform:translateY(-1px); box-shadow:0 12px 24px rgba(45,35,20,.07)}
.lite-component-icon{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:14px; background:var(--lite-soft); flex:0 0 auto}
.lite-component-tile strong{display:block; font-size:13px}.lite-component-tile small{display:block; margin-top:2px; color:var(--lite-muted); font-size:11px}
.lite-soft-details,.lite-advanced-drawer{border:1px solid var(--lite-line); border-radius:22px; background:#fbf8f2; padding:10px; margin-bottom:12px}
.lite-soft-details summary,.lite-advanced-drawer summary{cursor:pointer; font-weight:800; font-size:13px; color:var(--lite-ink)}
.lite-mini-form,.lite-inspector-form,.lite-add-form details{display:grid; gap:10px; margin-top:10px}
.lite-mini-form label,.lite-inspector-form label,.lite-add-form label{display:grid; gap:6px; color:var(--lite-muted); font-size:12px}
.lite-empty-help,.lite-empty-state{display:grid; gap:6px; padding:18px; border:1px dashed #d6c9b9; border-radius:24px; background:#fbf8f2; color:var(--lite-muted)}
.lite-empty-help strong,.lite-empty-state strong{color:var(--lite-ink)}
.lite-canvas-wrap{padding:16px; background:rgba(236,228,216,.72)}
.lite-canvas-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:12px; border:1px solid var(--lite-line); border-radius:26px; background:rgba(255,254,251,.86)}
.lite-canvas-toolbar strong{display:block}.lite-canvas-toolbar small{display:block; margin-top:3px; color:var(--lite-muted); font-size:12px}
.lite-segment{display:flex; gap:4px; padding:4px; border-radius:18px; background:var(--lite-soft)}
.lite-segment a{padding:8px 12px; border-radius:14px; color:var(--lite-muted); text-decoration:none; font-size:12px}
.lite-segment a.active{background:#fff; color:var(--lite-ink); box-shadow:0 6px 14px rgba(45,35,20,.06)}
.lite-form-paper{max-width:920px; margin:0 auto; padding:22px; border-radius:34px; background:#fffefb; box-shadow:0 24px 80px rgba(45,35,20,.09)}
.lite-form-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--lite-line)}
.lite-form-head h3{margin:0; font-size:21px}.lite-form-head p{margin:5px 0 0; color:var(--lite-muted); font-size:13px}
.lite-badge{display:inline-flex; align-items:center; border-radius:99px; padding:6px 10px; background:var(--lite-accent); color:#fff; font-size:11px}
.lite-section{border:1px solid var(--lite-line); border-radius:30px; padding:18px; background:#fff; margin-bottom:16px; transition:.16s ease}
.lite-section:hover,.lite-block:hover,.lite-field:hover{border-color:#c9bbaa}.lite-section.dragging,.lite-block.dragging,.lite-field.dragging{opacity:.5}
.lite-section-head,.lite-block-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px}
.lite-node-line{display:flex; align-items:center; gap:9px}.lite-node-line strong{font-size:15px}.lite-section-head small,.lite-block-head small{display:block; margin-top:3px; color:var(--lite-muted); font-size:12px}
.lite-drag{color:#b4aa9c; cursor:grab}
.lite-node-menu{position:relative}.lite-node-menu summary{list-style:none; cursor:pointer; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--lite-soft)}
.lite-node-menu[open] summary{background:var(--lite-accent); color:#fff}.lite-node-menu > form,.lite-node-menu > .lite-mini-form{min-width:260px}
.lite-node-menu[open]{z-index:10}.lite-node-menu[open]::after{content:""; position:fixed; inset:0; z-index:-1}
.lite-node-menu form{position:absolute; top:42px; left:0; width:280px; padding:12px; border:1px solid var(--lite-line); border-radius:22px; background:#fff; box-shadow:0 22px 55px rgba(45,35,20,.14)}
.lite-block-stack{display:grid; gap:14px}.lite-block{border:1px solid var(--lite-line); border-radius:28px; padding:15px; background:#fbf8f2}
.lite-field-list{display:grid; gap:10px; grid-template-columns:repeat(var(--cols,1), minmax(0,1fr))}
.lite-field{display:grid; gap:10px; border:1px solid var(--lite-line); border-radius:24px; padding:14px; background:#fff; transition:.16s ease}
.lite-field.selected{border-color:var(--lite-accent); box-shadow:0 0 0 4px rgba(0,0,0,.045)}
.lite-field.width-full{grid-column:1/-1}.lite-field.width-half{grid-column:span 1}.lite-field.width-third,.lite-field.width-quarter{grid-column:span 1}
.lite-field-main{display:flex; align-items:center; gap:10px}.lite-field-icon{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:14px; background:var(--lite-soft); flex:0 0 auto}.lite-field-main strong{display:block}.lite-field-main small{display:block; margin-top:2px; color:var(--lite-muted); font-size:11px}
.lite-photo-chip{display:inline-flex; width:max-content; border:1px dashed #d0c1af; border-radius:12px; padding:5px 9px; color:var(--lite-muted); font-size:11px; background:#fbf8f2}
.lite-field-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center}.lite-field-actions a,.lite-field-actions button{border:1px solid var(--lite-line); border-radius:12px; background:#fbf8f2; color:var(--lite-ink); padding:6px 9px; font-size:11px; text-decoration:none; cursor:pointer}.lite-field-actions form{display:inline}.lite-field-actions .danger-link{color:#9a2e2e}
.lite-empty-drop{padding:16px; border:1px dashed #d6c9b9; border-radius:22px; background:#fbf8f2; color:var(--lite-muted); text-align:center; font-size:13px}
.lite-inspector-form{display:grid; gap:12px}.lite-inspector-form textarea{resize:vertical}.lite-check{display:flex !important; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:10px 12px; border-radius:16px; background:var(--lite-soft); color:var(--lite-ink) !important}.lite-check input{width:auto !important}
.lite-photo-rules{display:grid; gap:10px; padding:14px; border:1px solid var(--lite-line); border-radius:24px; background:var(--lite-soft)}.lite-photo-rules strong{display:block}.lite-photo-rules small{display:block; margin-top:3px; color:var(--lite-muted); font-size:11px}.lite-two-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.photo-rule-panel-hidden{display:none !important}.lite-technical{opacity:.72}.lite-phone-preview{margin-top:16px; padding-top:16px; border-top:1px solid var(--lite-line)}.lite-phone-preview > strong{display:block; margin-bottom:10px}.lite-phone-card{min-height:92px; border-radius:26px; background:#1f1d1a; color:#fff; padding:14px}.lite-phone-card span{display:block; font-weight:800}.lite-phone-card small{display:block; margin-top:6px; color:rgba(255,255,255,.62)}
@media (max-width: 1240px){.lite-workspace{grid-template-columns:1fr}.lite-panel{position:static}.lite-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.lite-form-paper{max-width:none}.lite-field-list{grid-template-columns:1fr !important}}
@media (max-width: 760px){.lite-hero,.lite-canvas-toolbar,.lite-form-head{flex-direction:column; align-items:stretch}.lite-stats{grid-template-columns:1fr}.lite-actions{width:100%}.lite-actions .lite-btn{flex:1}.lite-component-grid{grid-template-columns:1fr}.lite-two-cols{grid-template-columns:1fr}}

/* Phase 6.1 — Ultra Calm Canvas Rebuild: matches the approved reference canvas */
.studio-ultra-calm{
  --u-bg:#f7f3ec;
  --u-panel:#fffefb;
  --u-canvas:#eee6da;
  --u-soft:#f0e9df;
  --u-line:#ded3c3;
  --u-ink:#201d19;
  --u-muted:#7d7469;
  --u-accent:#1f1d1a;
  --u-danger:#9d2f28;
  min-height:calc(100vh - 40px);
  padding:0 0 22px;
  color:var(--u-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(190,165,130,.22), transparent 30%),
    radial-gradient(circle at 95% 0%, rgba(255,255,255,.86), transparent 25%),
    var(--u-bg);
}
.studio-ultra-calm *{box-sizing:border-box}
.ultra-topbar{display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(260px,1fr); gap:18px; align-items:center; padding:16px 18px 14px; border-bottom:1px solid var(--u-line); background:rgba(247,243,236,.88); backdrop-filter:blur(16px); margin:0 0 18px}
.ultra-top-left{display:flex; align-items:center; gap:12px; min-width:0; justify-content:flex-start; direction:rtl}.ultra-icon-link{width:34px; height:34px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:var(--u-ink); text-decoration:none; font-size:22px}.ultra-icon-link:hover{background:var(--u-soft)}
.ultra-template-title strong{display:block; font-size:15px}.ultra-template-title small{display:block; margin-top:2px; color:var(--u-muted); font-size:12px}.ultra-actions{display:flex; justify-content:center; gap:8px; direction:rtl}.ultra-brand-block{display:flex; align-items:center; justify-content:flex-end; gap:10px; direction:rtl}.ultra-brand-block strong{display:block; font-size:15px}.ultra-brand-block small{display:block; margin-top:2px; color:var(--u-muted); font-size:12px}.ultra-power{width:42px; height:42px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:var(--u-accent); color:#fff; font-size:24px; flex:0 0 auto}.ultra-badge-dark{display:inline-flex; width:max-content; align-items:center; border-radius:999px; padding:6px 10px; background:var(--u-accent); color:#fff; font-size:11px; line-height:1}
.ultra-btn{min-height:40px; border:1px solid var(--u-line); border-radius:16px; padding:9px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.82); color:var(--u-ink); font:inherit; font-size:13px; text-decoration:none; cursor:pointer; transition:.16s ease}.ultra-btn:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(45,35,20,.07)}.ultra-btn-dark{background:var(--u-accent); border-color:var(--u-accent); color:#fff}.ultra-danger{border-color:#e7bbb4 !important; color:var(--u-danger) !important; background:#fff8f7 !important}.ultra-mini-link{font-size:12px; color:var(--u-muted); text-decoration:none}
.ultra-workspace{display:grid; grid-template-columns:320px minmax(460px,1fr) 285px 320px; gap:14px; align-items:start; direction:ltr; padding:0 16px}.ultra-workspace>*, .ultra-topbar>*{direction:rtl}.ultra-panel,.ultra-canvas-shell{border:1px solid var(--u-line); border-radius:34px; background:rgba(255,254,251,.88); box-shadow:0 22px 66px rgba(45,35,20,.07); backdrop-filter:blur(12px)}.ultra-panel{padding:16px; position:sticky; top:92px}.ultra-canvas-shell{padding:18px; background:rgba(238,230,218,.72)}
.ultra-panel-head{display:flex; align-items:flex-start; gap:10px; justify-content:space-between; margin-bottom:14px}.ultra-panel-head>div{min-width:0}.ultra-panel-head strong{display:block; font-size:15px}.ultra-panel-head small{display:block; margin-top:3px; color:var(--u-muted); font-size:12px; line-height:1.6}.ultra-panel-icon{width:30px; height:30px; border-radius:14px; background:var(--u-soft); display:flex; align-items:center; justify-content:center; color:var(--u-muted); flex:0 0 auto}.ultra-empty-settings{min-height:220px; border:1px dashed #d6c9b9; border-radius:28px; background:#fbf8f2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--u-muted); text-align:center; padding:22px}.ultra-empty-settings strong{color:var(--u-ink)}
.ultra-inspector-form,.ultra-hidden-form,.ultra-style-options,.ultra-add-list{display:grid; gap:10px}.ultra-inspector-form label,.ultra-hidden-form label,.ultra-details label,.lite-mini-form label{display:grid; gap:6px; font-size:12px; color:var(--u-muted)}.ultra-inspector-form input,.ultra-inspector-form select,.ultra-inspector-form textarea,.ultra-hidden-form input,.ultra-hidden-form select,.ultra-details input,.ultra-details select,.ultra-details textarea,.lite-mini-form input,.lite-mini-form select{width:100%; border:1px solid var(--u-line); border-radius:16px; background:#fbf8f2; color:var(--u-ink); padding:10px 12px; font:inherit; font-size:13px; outline:none}.ultra-inspector-form input:focus,.ultra-inspector-form select:focus,.ultra-inspector-form textarea:focus{border-color:var(--u-accent); background:#fff}.ultra-field-key{opacity:.62}.ultra-check-row,.ultra-check-line{display:flex !important; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:11px 12px; border-radius:16px; background:var(--u-soft); color:var(--u-ink) !important}.ultra-check-row input,.ultra-check-line input{width:auto !important}.ultra-photo-box{display:grid; gap:10px; border:1px solid var(--u-line); border-radius:26px; background:var(--u-soft); padding:14px}.ultra-photo-box strong{font-size:14px}.ultra-two-inputs,.ultra-two-buttons{display:grid; grid-template-columns:1fr 1fr; gap:8px}.ultra-sub-actions{margin-top:10px}.ultra-sub-actions form{display:block}.ultra-sub-actions button{width:100%}.ultra-details{border:1px solid var(--u-line); border-radius:22px; background:#fbf8f2; padding:10px; margin-top:2px}.ultra-details summary{cursor:pointer; font-size:13px; font-weight:800}.ultra-details[open]{display:grid; gap:10px}.ultra-details form{display:grid; gap:10px; margin-top:10px}.ultra-placement-details{display:none}
.ultra-paper{max-width:760px; margin:0 auto; border-radius:34px; background:var(--u-panel); padding:22px; box-shadow:0 24px 80px rgba(45,35,20,.10)}.ultra-paper-head{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:16px; border-bottom:1px solid var(--u-line); margin-bottom:18px}.ultra-paper-head h3{margin:0; font-size:21px}.ultra-paper-head p{margin:5px 0 0; font-size:13px; color:var(--u-muted)}
.ultra-section{border:1px solid var(--u-line); border-radius:32px; padding:18px; background:#fff; margin-bottom:16px; transition:.16s ease}.ultra-section:hover,.ultra-block:hover,.ultra-field:hover{border-color:#c5b7a5}.ultra-section.dragging,.ultra-block.dragging,.ultra-field.dragging{opacity:.55}.ultra-section-head,.ultra-block-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px}.ultra-node-title{display:flex; align-items:center; gap:9px}.ultra-node-title strong{font-size:15px}.ultra-section-head small,.ultra-block-head small{display:block; margin-top:5px; color:var(--u-muted); font-size:12px}.flow-drag{color:#b4aa9c; cursor:grab}.ultra-node-menu{position:relative}.ultra-node-menu summary{list-style:none; cursor:pointer; width:34px; height:34px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--u-soft)}.ultra-node-menu[open] summary{background:var(--u-accent); color:#fff}.ultra-node-menu[open]{z-index:20}.ultra-node-menu form{position:absolute; top:42px; left:0; width:280px; display:grid; gap:10px; padding:12px; border:1px solid var(--u-line); border-radius:24px; background:#fff; box-shadow:0 22px 55px rgba(45,35,20,.14)}
.ultra-block-stack,.ultra-field-grid{display:grid; gap:12px}.ultra-block{border:1px solid var(--u-line); border-radius:30px; background:#faf7f2; padding:15px}.ultra-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ultra-field{position:relative; display:grid; gap:12px; border:1px solid var(--u-line); border-radius:26px; padding:14px; background:#fff; transition:.16s ease; overflow:hidden}.ultra-field.selected{border-color:var(--u-accent); box-shadow:0 0 0 4px rgba(0,0,0,.055)}.ultra-field-open{position:absolute; inset:0; z-index:1}.ultra-field-top,.ultra-yn-preview,.ultra-photo-preview,.ultra-text-preview,.ultra-field-actions{position:relative; z-index:2}.ultra-field-top{display:flex; align-items:flex-start; gap:10px}.ultra-field-icon{display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:15px; background:var(--u-soft); color:var(--u-ink); flex:0 0 auto}.ultra-field-top strong{display:block; font-size:14px}.ultra-field-top small{display:block; margin-top:3px; color:var(--u-muted); font-size:11px}.ultra-yn-preview{display:flex; gap:8px}.ultra-yn-preview span{border:1px solid var(--u-line); border-radius:13px; background:#fbf8f2; padding:8px 15px; font-size:12px}.ultra-text-preview{border:1px solid var(--u-line); border-radius:14px; background:#fbf8f2; color:var(--u-muted); padding:9px 12px; font-size:12px}.ultra-photo-preview{border:1px dashed #d0c1af; border-radius:18px; background:#fbf8f2; padding:12px}.ultra-photo-preview>div{display:flex; align-items:center; justify-content:space-between; color:var(--u-muted); font-size:12px}.ultra-photo-preview>div strong{color:var(--u-ink)}.ultra-photo-preview i{display:block; height:7px; border-radius:99px; background:#e9dfd1; margin:10px 0 7px; overflow:hidden}.ultra-photo-preview i b{display:block; height:100%; border-radius:99px; background:var(--u-accent)}.ultra-photo-preview small{color:var(--u-muted); font-size:11px}.ultra-field-actions{display:none}.ultra-field.selected .ultra-field-actions{display:flex}.ultra-field-actions a{border:1px solid var(--u-line); background:#fbf8f2; border-radius:12px; padding:6px 10px; text-decoration:none; color:var(--u-ink); font-size:11px}.ultra-empty-drop,.ultra-empty-state{border:1px dashed #d6c9b9; border-radius:24px; background:#fbf8f2; color:var(--u-muted); padding:18px; text-align:center; display:grid; gap:6px}.ultra-empty-state strong{color:var(--u-ink)}
.ultra-add-tile{width:100%; border:1px solid var(--u-line); border-radius:24px; padding:12px; display:flex; align-items:center; gap:12px; background:var(--u-soft); color:var(--u-ink); cursor:pointer; transition:.16s ease; text-align:right}.ultra-add-tile:hover{transform:translateY(-1px); border-color:#c5b7a5; box-shadow:0 12px 28px rgba(45,35,20,.06)}.ultra-add-tile span{width:38px; height:38px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--u-accent); color:#fff}.ultra-add-tile strong{font-size:14px}.ultra-add-tile i{margin-right:auto; font-style:normal; color:var(--u-muted)}.ultra-hidden-form{margin-bottom:12px}.ultra-style-card{border:1px solid var(--u-line); border-radius:28px; background:#fff; padding:16px; min-height:128px}.ultra-style-card span{width:38px; height:38px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--u-accent); color:#fff; margin-bottom:12px}.ultra-style-card strong{display:block; font-size:14px}.ultra-style-card small{display:block; margin-top:3px; color:var(--u-muted); font-size:12px}.ultra-style-card p{font-size:12px; line-height:1.7; color:var(--u-muted); margin:12px 0 0}.ultra-style-card.active{border-color:var(--u-accent); box-shadow:0 0 0 4px rgba(0,0,0,.045)}.ultra-style-card.green span{background:#3a6b50}.photo-rule-panel-hidden{display:none !important}
@media (max-width:1500px){.ultra-workspace{grid-template-columns:300px minmax(420px,1fr) 270px}.ultra-style-panel{display:none}}
@media (max-width:1180px){.ultra-workspace{grid-template-columns:1fr; direction:rtl}.ultra-panel{position:static}.ultra-field-grid{grid-template-columns:1fr}.ultra-paper{max-width:none}.ultra-topbar{grid-template-columns:1fr; gap:10px}.ultra-actions{justify-content:flex-start}.ultra-brand-block{justify-content:flex-start}}
@media (max-width:760px){.ultra-workspace{padding:0 10px}.ultra-topbar{padding:12px}.ultra-paper{padding:16px}.ultra-paper-head,.ultra-section-head,.ultra-block-head{flex-direction:column}.ultra-two-inputs,.ultra-two-buttons{grid-template-columns:1fr}.ultra-actions{display:grid; grid-template-columns:1fr 1fr 1fr}.ultra-btn{padding:8px 10px}.ultra-field-grid{grid-template-columns:1fr}}