:root{
  --bg:#05070b;
  --panel:#101622;
  --panel2:#151d2b;
  --panel3:#0b111b;
  --text:#eef4f5;
  --muted:#9fb1b8;
  --line:#283747;
  --blueprint:#6da9c8;
  --brass:#c79a45;
  --brass2:#8f642a;
  --bronze:#5f4224;
  --amber:#e3b35b;
  --danger:#e87070;
  --ok:#74d99a;
  --accent:#7db8d6;
  --shadow:rgba(0,0,0,.38);
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,"IBM Plex Sans",system-ui,Segoe UI,Arial,sans-serif;
  letter-spacing:0;
  background:
    linear-gradient(rgba(109,169,200,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,169,200,.045) 1px,transparent 1px),
    radial-gradient(circle at 82% 8%,rgba(199,154,69,.14),transparent 34%),
    radial-gradient(circle at 8% 18%,rgba(91,133,156,.17),transparent 30%),
    linear-gradient(135deg,#070b12 0%,#05070b 52%,#0d1118 100%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
}
#app{display:flex;min-height:100vh}
.sidebar{
  width:300px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  padding:20px;
  background:
    linear-gradient(180deg,rgba(19,25,35,.96),rgba(7,11,17,.96)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);
  border-right:1px solid rgba(199,154,69,.38);
  box-shadow:inset -1px 0 0 rgba(255,231,176,.08),12px 0 34px rgba(0,0,0,.2);
  backdrop-filter:blur(16px);
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:20px;position:relative}
.brand:after,.panel:after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe0a2,var(--brass2));
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.45);
}
.brand:after{right:2px;top:2px}
.logo{
  height:44px;
  width:44px;
  border:1px solid rgba(199,154,69,.8);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#f3ce87;
  background:radial-gradient(circle at 35% 30%,rgba(255,223,155,.2),rgba(20,14,8,.72));
  box-shadow:inset 0 0 0 4px rgba(199,154,69,.08),0 0 24px rgba(199,154,69,.13);
}
h1,h2,h3,p{margin-top:0}
h1{font-size:22px;margin-bottom:2px;font-weight:820}
h2,h3{letter-spacing:.01em}
.brand p,.hint{color:var(--muted);font-size:13px;line-height:1.4}
.main{flex:1;min-width:0}
.topbar{
  height:70px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid rgba(199,154,69,.24);
  background:rgba(7,10,16,.72);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 34px rgba(0,0,0,.15);
}
.title-input{
  flex:1;
  background:transparent;
  border:0;
  color:var(--text);
  font-size:22px;
  font-weight:750;
  outline:0;
}
.status{
  border:1px solid rgba(199,154,69,.42);
  border-radius:999px;
  padding:8px 12px;
  color:#e5c98f;
  font-size:13px;
  background:linear-gradient(180deg,rgba(33,25,14,.82),rgba(10,13,18,.82));
}
.entitlement-badge{
  color:#bdf5cf;
  border-color:rgba(116,217,154,.42);
  background:linear-gradient(180deg,rgba(18,43,30,.82),rgba(10,13,18,.82));
}
.grid{display:grid;grid-template-columns:minmax(320px,430px) 1fr;gap:16px;padding:16px}
.panel{
  position:relative;
  background:
    linear-gradient(180deg,rgba(21,29,43,.96),rgba(9,14,22,.96)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 6px);
  border:1px solid rgba(199,154,69,.28);
  border-radius:10px;
  padding:16px;
  box-shadow:0 18px 60px var(--shadow),inset 0 1px 0 rgba(255,235,186,.08);
}
.panel:after{right:10px;top:10px}
.viewport-panel{min-height:500px}
.viewport-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
canvas{
  width:100%;
  height:520px;
  border-radius:8px;
  background:radial-gradient(circle at center,#17223b,#05070d 78%);
  border:1px solid rgba(125,184,214,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 0 38px rgba(0,0,0,.35);
}
.mark3-launch-workbench{margin-top:14px;display:grid;gap:12px}
.mark3-workbench-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mark3-workbench-head h3{margin-bottom:4px}
#mark3VersionBadge{color:#e5c98f;font-size:12px;border:1px solid rgba(199,154,69,.45);border-radius:999px;padding:3px 8px;vertical-align:middle}
.segmented{display:flex;border:1px solid rgba(125,184,214,.24);border-radius:8px;overflow:hidden;flex:none}
.segmented button{border-radius:0;border:0;background:#0b111b;padding:8px 12px;color:var(--muted)}
.segmented button.active{background:#7f77dd;color:#fff}
.mark3-controls-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px;align-items:end}
.mark3-controls-grid label{display:grid;gap:6px;color:var(--muted);font-size:12px}
.mark3-controls-grid input,.mark3-controls-grid select{background:var(--panel3);border:1px solid rgba(125,184,214,.24);border-radius:8px;color:var(--text);padding:8px 10px;outline:0}
.mark3-controls-grid input:focus,.mark3-controls-grid select:focus{border-color:#7f77dd}
.mark3-controls-grid input[type="range"]{accent-color:#7f77dd;padding:0}
.mark3-controls-grid label span{color:#e5c98f;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.mark3-export-row{display:flex;gap:10px;flex-wrap:wrap;grid-column:1/-1}
.mark3-stats{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:8px;border:1px solid rgba(125,184,214,.22);border-radius:8px;background:#07101d;padding:10px}
.mark3-stat{display:grid;gap:3px;min-width:0}
.mark3-stat span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.mark3-stat span:last-child{color:#eef4f5;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.mark3-toast{border:1px solid rgba(29,158,117,.45);background:#1d9e75;color:#fff;border-radius:8px;padding:10px 12px;font-weight:750}
.mark3-dev-panel{border:1px solid rgba(127,119,221,.5);border-radius:8px;background:#0b111b;padding:10px;display:flex;gap:10px;flex-wrap:wrap}
.mark3-dev-panel.hidden{display:none}
.mark3-dev-panel label{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12px}
textarea{
  width:100%;
  resize:vertical;
  background:linear-gradient(180deg,#080d15,#060911);
  color:var(--text);
  border:1px solid rgba(125,184,214,.24);
  border-bottom-color:rgba(199,154,69,.42);
  border-radius:8px;
  padding:14px;
  outline:0;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.35);
}
textarea:focus{border-color:rgba(199,154,69,.78);box-shadow:0 0 0 3px rgba(199,154,69,.12),inset 0 1px 8px rgba(0,0,0,.35)}
button{
  border:0;
  border-radius:8px;
  padding:11px 14px;
  color:var(--text);
  font-weight:750;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
button:hover{transform:translateY(-1px)}
.primary{
  color:#171007;
  background:linear-gradient(180deg,#ffd789,#b98531);
  border:1px solid rgba(255,225,161,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 18px rgba(0,0,0,.22);
}
.primary:hover{background:linear-gradient(180deg,#ffe1a2,#c7933f)}
.ghost{
  background:linear-gradient(180deg,#121a27,#090e17);
  border:1px solid rgba(125,184,214,.22);
  color:#d8e6e8;
}
.ghost:hover{border-color:rgba(199,154,69,.48);background:linear-gradient(180deg,#172232,#0b111c)}
.full{width:100%;margin:8px 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.small button{padding:8px 10px;font-size:12px}
.tier{
  border:1px solid rgba(199,154,69,.3);
  background:linear-gradient(180deg,#0b111a,#070a10);
  border-radius:8px;
  padding:12px;
  margin:12px 0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
}
.mark3-bridge-status{display:grid;gap:5px}
.mark3-bridge-status strong{color:#e5c98f}
.project-list{display:flex;flex-direction:column;gap:8px}
.project-item,.project-card{
  padding:12px;
  border:1px solid rgba(125,184,214,.22);
  border-radius:8px;
  background:linear-gradient(180deg,#111925,#0a0f17);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.project-item.active,.project-card.active{border-color:rgba(199,154,69,.8);box-shadow:0 0 18px rgba(199,154,69,.13)}
.project-item small{color:var(--muted)}
.feedback{display:grid;gap:10px}
.feedback-default-sections,.feedback-detail-sections{display:grid;gap:8px}
.feedback-banner,.feedback-section{
  border:1px solid rgba(125,184,214,.22);
  border-left:3px solid rgba(199,154,69,.6);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(12,18,27,.96),rgba(6,10,16,.96));
  padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,235,186,.045);
}
.feedback-section summary{
  cursor:pointer;
  font-weight:820;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.feedback-section summary::-webkit-details-marker{display:none}
.feedback-section summary:after{content:"+";color:#d5b16d;font-weight:900}
.feedback-section[open] summary:after{content:"-"}
.feedback-section-body{display:grid;gap:6px;margin-top:10px}
.feedback-line{display:grid;grid-template-columns:minmax(105px,42%) 1fr;gap:8px;align-items:start;font-size:12px;line-height:1.35}
.feedback-key{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.06em}
.feedback-value{word-break:break-word}
.feedback-toggle{width:100%;margin:2px 0 0}
.feedback-simple{white-space:pre-wrap;word-break:break-word}
.status-pass{border-color:rgba(116,217,154,.55)!important;color:#bdf5cf}
.status-warning{border-color:rgba(227,179,91,.72)!important;color:#f3d390}
.status-blocked{border-color:rgba(232,112,112,.66)!important;color:#f4b0ae}
.status-neutral{border-color:rgba(125,184,214,.35)!important;color:#c9e4ef}
.feedback-section.status-pass{border-left-color:var(--ok)}
.feedback-section.status-warning{border-left-color:var(--amber)}
.feedback-section.status-blocked{border-left-color:var(--danger)}
.feedback-section.status-neutral{border-left-color:var(--accent)}
.feedback-section.status-pass summary{color:#bdf5cf}
.feedback-section.status-warning summary{color:#f3d390}
.feedback-section.status-blocked summary{color:#f4b0ae}
.feedback-section.status-neutral summary{color:#c9e4ef}
.chip{
  border:1px solid rgba(125,184,214,.22);
  border-radius:8px;
  padding:10px;
  background:#07101d;
}
.chip.ok{border-color:rgba(116,217,154,.45)}
.chip.warn{border-color:rgba(227,179,91,.55)}
.chip.bad{border-color:rgba(232,112,112,.55)}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:#050812;
  border:1px solid rgba(125,184,214,.2);
  border-radius:8px;
  padding:14px;
  max-height:360px;
  overflow:auto;
  color:#cfe8ff;
}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:20px}
.hidden{display:none}
.modal-card{max-width:420px;background:var(--panel);border:1px solid rgba(199,154,69,.38);border-radius:10px;padding:22px}
.mobile-only{display:none}
@media(max-width:900px){
  #app{display:block}
  .sidebar{position:fixed;z-index:5;transform:translateX(-105%);transition:.2s;width:82vw}
  .sidebar.open{transform:none}
  .grid{grid-template-columns:1fr}
  .mobile-only{display:block}
  .topbar{position:sticky;top:0;z-index:4}
  canvas{height:360px}
  .viewport-head{display:block}
  .mark3-workbench-head{display:grid}
  .mark3-controls-grid{grid-template-columns:1fr}
  .mark3-stats{grid-template-columns:repeat(2,minmax(120px,1fr))}
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.price-grid div {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.price-grid strong,
.price-grid span {
  display: block;
}

.price-grid span {
  margin-top: 4px;
  color: #334155;
}