.studio-input { display: grid; gap: 10px; }
.studio-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.quick-action {
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  background: white;
  text-align: left;
  text-decoration: none;
}
.quick-action:hover { border-color: var(--green); background: var(--soft); }
.quick-action strong { font-size: 21px; }
.quick-action span { color: var(--muted); line-height: 1.55; }
.quick-action.viral { border-color: #d9bd77; background: #fffaf0; }

.workspace-nav { display:flex; gap:8px; padding:6px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.78); }
.workspace-tab { flex:1; padding:11px 14px; color:var(--muted); background:transparent; font-weight:800; }
.workspace-tab.active { color:white; background:var(--green); }
.workspace-view { display:grid; gap:20px; }
.mode-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mode-action { display:grid; gap:7px; padding:19px; border:1px solid var(--line); color:var(--ink); background:white; text-align:left; }
.mode-action:hover { border-color:var(--green); background:var(--soft); }
.mode-action strong { font-size:20px; }
.mode-action span { color:var(--muted); line-height:1.55; }

.workflow-view { min-height:70vh; }
.workflow-toolbar { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
#workflow-frame { display:block; width:100%; min-height:78vh; border:1px solid var(--line); border-radius:16px; background:var(--page); }

.record-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stat-card { padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.stat-card span { display:block; color:var(--muted); font-size:12px; }
.stat-card strong { display:block; margin-top:5px; font-size:27px; }
.records-list,.radar-cards { display:grid; gap:13px; }
.record-card,.radar-card { padding:17px; border:1px solid var(--line); border-radius:13px; background:white; }
.record-card header { display:flex; justify-content:space-between; gap:12px; }
.record-card h3,.radar-card h3 { margin:0; }
.record-card time { color:var(--muted); font-size:12px; }
.record-tags { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.record-tag { width:max-content; padding:4px 8px; border-radius:99px; color:var(--green-dark); background:var(--soft); font-size:12px; font-weight:750; }
.record-card details { margin-top:10px; }
.record-card summary { color:var(--green-dark); cursor:pointer; font-weight:800; }
.record-field { margin-top:12px; padding:13px; border-radius:10px; background:#f5f8f6; }
.record-field strong { font-size:13px; }
.record-field p { max-height:260px; overflow:auto; margin:6px 0 0; color:var(--muted); line-height:1.7; white-space:pre-wrap; }
.record-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.radar-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.radar-card { display:flex; flex-direction:column; gap:10px; }
.radar-card > p { margin:0; color:var(--muted); line-height:1.6; }
.radar-card .radar-mechanism { padding:11px; border-radius:9px; background:#f5f8f6; }
.radar-card .primary { margin-top:auto; }

.studio-route {
  display: grid;
  gap: 10px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}

.studio-route.recommended { border: 2px solid var(--green); background: var(--soft); }
.studio-route header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.studio-route h3 { margin: 0; font-size: 21px; }
.studio-route p { margin: 0; line-height: 1.6; }
.studio-route small { color: var(--muted); line-height: 1.5; }
.studio-route .primary { width: 100%; margin-top: auto; }
.route-badge { padding: 4px 8px; border-radius: 999px; color: white; background: var(--green); font-size: 11px; font-weight: 800; }

@media (max-width: 760px) {
  .studio-routes, .quick-actions, .mode-actions, .radar-cards { grid-template-columns: 1fr; }
  .record-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace-nav { position:sticky; top:8px; z-index:5; }
  .workspace-tab { padding:10px 7px; font-size:13px; }
  .record-card header { flex-direction:column; }
  #workflow-frame { min-height:82vh; }
}