:root {
  --navy:#091337;
  --indigo:#1a359d;
  --cyan:#4ed3fd;
  --blue:#0a66c2;
  --light:#eaf4fd;
  --page:#f7f9fb;
  --line:#dee5ea;
  --muted:#4f5d6b;
  --text:#1d2226;
  --green:#13835b;
  --radius:20px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  font-size:14px;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--page)
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:var(--blue);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--indigo);
  outline-offset:2px
}
button:disabled {
  opacity:.48;
  cursor:wait
}
h1,h2,h3,h4,p {
  margin-top:0
}
h1 {
  font-size:32px;
  letter-spacing:-1.1px;
  line-height:1.2;
  font-weight:650;
  color:var(--navy)
}
h2 {
  font-size:20px;
  letter-spacing:-.6px;
  color:var(--navy);
  font-weight:620
}
h3 {
  font-size:15px;
  font-weight:620;
  color:var(--navy)
}
p {
  line-height:1.65
}
small,.small {
  font-size:12px;
  line-height:1.55
}
.muted {
  color:var(--muted)
}
.hidden,[hidden] {
  display:none!important
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted)
}
.icon {
  width:19px;
  height:19px;
  flex-shrink:0;
  vertical-align:middle
}
.btn,button.btn,a.btn {
  border:1px solid var(--line);
  background:white;
  color:var(--navy);
  padding:11px 19px;
  min-height:44px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  border-radius:26px;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap
}
.btn:hover {
  border-color:#9dbcd6;
  box-shadow:0 3px 8px #09133708
}
.btn.primary,.btn-primary {
  background:var(--navy)!important;
  border-color:var(--navy)!important;
  color:white!important
}
.btn.blue {
  background:var(--light);
  border-color:transparent;
  color:var(--blue)
}
.btn.small {
  min-height:34px;
  padding:7px 13px;
  font-size:11px
}
.btn.danger {
  color:#b54332
}
.btn.ghost,.text-button {
  background:transparent;
  border:0;
  color:var(--muted);
  padding:10px;
  cursor:pointer
}
.wide {
  width:100%
}
.inline {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
.between {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.stack {
  display:grid;
  gap:20px
}
.grid {
  display:grid;
  gap:20px
}
.cols2 {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.cols3 {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.cols4 {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:23px;
  box-shadow:0 3px 8px #09133702;
  min-width:0
}
.card h2 {
  margin-bottom:8px
}
.card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:22px
}
.card-head h2,.card-head h3 {
  margin:0
}
.card p:last-child {
  margin-bottom:0
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border-radius:20px;
  background:#f2f5f7;
  color:var(--muted);
  font-size:10px;
  font-weight:500
}
.chip.blue {
  background:var(--light);
  color:var(--blue)
}
.chip.green {
  background:#eaf7f1;
  color:var(--green)
}
.chip.amber {
  background:#fff4e5;
  color:#956020
}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}
.avatar {
  width:37px;
  height:37px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  object-fit:cover;
  background:var(--light);
  color:var(--indigo);
  font-weight:600
}
.avatar.big {
  width:86px;
  height:86px;
  border:5px solid white;
  font-size:27px
}
.label-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid #d9eafb;
  border-radius:11px;
  color:var(--blue);
  background:#f6fbff
}
.field {
  display:grid;
  gap:8px;
  margin-bottom:17px
}
.field label,label.field {
  font-size:12px;
  font-weight:550;
  color:var(--navy)
}
input:not([type=checkbox]):not([type=radio]),textarea,select,.input {
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:13px;
  padding:13px 14px;
  outline:none;
  line-height:1.5
}
input:focus,textarea:focus,select:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #0a66c259
}
textarea {
  resize:vertical;
  min-height:90px
}
input[type=checkbox],input[type=radio] {
  accent-color:var(--blue);
  width:16px;
  height:16px
}
.check {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  line-height:1.6
}
.notice {
  border-radius:13px;
  background:var(--light);
  border:1px solid #d4e9fb;
  color:#234569;
  padding:14px;
  font-size:12px;
  line-height:1.65;
  margin:14px 0
}
.notice.error {
  background:#fff1ed;
  color:#9a3b2c;
  border-color:#f8dcd4
}
.notice.success {
  background:#eaf7f1;
  color:var(--green)
}
details {
  border:1px solid var(--line);
  border-radius:13px;
  padding:14px;
  margin:10px 0;
  background:white
}
summary {
  cursor:pointer;
  font-size:12px;
  font-weight:550
}
details p {
  margin-top:12px;
  color:var(--muted);
  font-size:12px
}
pre {
  white-space:pre-wrap;
  word-break:break-word;
  font:12px/1.7 ui-monospace,monospace;
  color:var(--muted)
}
.preserve {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:250px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:30px 20px 20px;
  display:flex;
  flex-direction:column;
  z-index:20
}
.brand {
  display:block;
  padding:0 16px;
  margin-bottom:44px
}
.brand img {
  width:104px
}
.nav-caption {
  padding:0 15px;
  margin-bottom:11px;
  font-size:9px;
  letter-spacing:1.4px;
  color:#88929c
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  margin-bottom:5px;
  color:#687481;
  border-radius:13px;
  font-size:12px;
  font-weight:500
}
.nav-item:hover {
  background:#f6f8fa;
  text-decoration:none
}
.nav-item.active {
  background:var(--light);
  color:var(--blue);
  font-weight:650
}
.nav-item .count {
  margin-left:auto;
  font-size:9px;
  background:#fff;
  border-radius:5px;
  padding:3px 5px
}
.nav-sep {
  margin-top:30px
}
.sidebar-bottom {
  margin-top:auto
}
.sidebar-promo {
  padding:16px;
  background:#f5faff;
  border:1px solid #e1effb;
  border-radius:17px;
  margin:25px 0 17px
}
.sidebar-promo p {
  font-size:11px;
  color:var(--muted);
  margin:6px 0 13px
}
.sidebar-user {
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 6px 0;
  border-top:1px solid var(--line);
  font-size:12px
}
.sidebar-user small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px
}
.app-main {
  margin-left:250px;
  min-height:100vh
}
.topbar {
  height:74px;
  background:#ffffffd9;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:0 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  position:sticky;
  top:0;
  z-index:10
}
.breadcrumbs {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:var(--muted)
}
.breadcrumbs strong {
  font-weight:500;
  color:var(--navy)
}
.topbar .mobile-menu {
  display:none
}
.workspace {
  padding:32px 36px 44px;
  max-width:1580px;
  margin:auto
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:27px
}
.page-heading h1 {
  margin-bottom:9px
}
.page-heading p {
  margin:0;
  color:var(--muted);
  font-size:12px
}
.hello {
  color:var(--blue);
  font-size:10px;
  letter-spacing:1.4px;
  margin-bottom:12px;
  text-transform:uppercase
}
.metric-card {
  padding:19px 21px
}
.metric-card .between {
  margin-bottom:21px
}
.metric-card .metric-value {
  font-size:29px;
  font-weight:600;
  letter-spacing:-1px;
  color:var(--navy)
}
.metric-card .small {
  margin:8px 0 0;
  font-size:10px
}
.metric-card h3 {
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  margin:0
}
.dashboard-main {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:20px;
  margin:22px 0
}
.chart {
  width:100%;
  height:210px;
  display:block;
  overflow:visible
}
.chart text {
  font-size:10px;
  fill:#8b97a2
}
.chart .bar {
  fill:url(#barGradient)
}
.chart-empty {
  height:214px;
  display:grid;
  place-items:center;
  text-align:center;
  border-bottom:1px dashed var(--line);
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 49px,#eef2f6 50px);
  color:var(--muted)
}
.chart-empty p {
  font-size:12px;
  background:white;
  padding:15px
}
.score-wrap {
  display:flex;
  align-items:center;
  gap:25px;
  margin:22px 0
}
.score-ring {
  width:124px;
  height:124px;
  flex-shrink:0
}
.score-ring text {
  fill:var(--navy);
  font-size:30px;
  font-weight:600;
  letter-spacing:-1px
}
.score-ring .small {
  font-size:9px;
  font-weight:400;
  letter-spacing:0;
  fill:var(--muted)
}
.score-info h3 {
  margin:0 0 7px
}
.score-info p {
  font-size:11px
}
.progress {
  height:5px;
  background:#edf2f7;
  border-radius:6px;
  overflow:hidden
}
.progress span {
  display:block;
  height:100%;
  background:var(--blue);
  border-radius:6px
}
.rubric-row {
  margin:13px 0
}
.rubric-row .between {
  margin-bottom:7px;
  font-size:11px
}
.assistant-banner {
  padding:20px 25px;
  display:flex;
  align-items:center;
  gap:20px;
  background:linear-gradient(110deg,#eaf4fd,#f9fcff);
  border:1px solid #d9eafa;
  border-radius:20px;
  margin-bottom:23px
}
.mascot {
  width:67px;
  height:67px;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px #0a66c215)
}
.assistant-banner h3 {
  margin:0 0 6px
}
.assistant-banner p {
  margin:0;
  font-size:12px;
  color:var(--muted)
}
.assistant-banner .btn {
  margin-left:auto
}
.recommendation {
  display:flex;
  gap:13px;
  padding:16px 0;
  border-bottom:1px solid #edf1f5
}
.recommendation:last-child {
  border:0;
  padding-bottom:0
}
.recommendation .number {
  font-size:11px;
  background:#f2f8fe;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  color:var(--blue);
  border-radius:9px;
  flex-shrink:0
}
.recommendation h3 {
  margin:0 0 6px;
  font-size:12px
}
.recommendation p {
  margin:0;
  font-size:11px;
  color:var(--muted)
}
.empty {
  padding:48px 20px;
  text-align:center;
  color:var(--muted)
}
.empty .label-icon {
  margin-bottom:18px;
  width:45px;
  height:45px
}
.empty h2 {
  font-size:20px
}
.empty p {
  max-width:400px;
  margin:10px auto 20px;
  font-size:12px
}
.table-wrap {
  overflow:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:12px
}
th {
  font-size:10px;
  font-weight:500;
  color:#8b96a0;
  padding:12px 10px;
  border-bottom:1px solid var(--line)
}
td {
  padding:16px 10px;
  border-bottom:1px solid #eff2f5;
  vertical-align:top
}
td:first-child {
  max-width:330px
}
td p {
  margin:0;
  line-height:1.5
}
.post-preview {
  max-width:350px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.tabs {
  display:flex;
  gap:5px;
  border-bottom:1px solid var(--line);
  margin:0 0 23px;
  overflow:auto
}
.tabs button {
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:none;
  padding:13px 17px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap
}
.tabs button.active {
  color:var(--blue);
  border-color:var(--blue);
  font-weight:600
}
.profile-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:23px
}
.profile-cover {
  height:145px;
  background:linear-gradient(120deg,#eaf4fd,#d2edfa);
  border-radius:19px 19px 0 0;
  position:relative;
  overflow:hidden
}
.profile-cover img {
  width:100%;
  height:100%;
  object-fit:cover
}
.profile-card {
  padding:0;
  overflow:hidden
}
.profile-intro {
  padding:0 25px 24px
}
.profile-intro .avatar {
  margin-top:-40px;
  position:relative
}
.profile-intro h2 {
  margin:14px 0 9px;
  font-size:23px
}
.profile-intro p {
  font-size:13px
}
.profile-content {
  padding:24px;
  border-top:1px solid var(--line)
}
.profile-content p {
  font-size:12px
}
.detail-entry {
  border-bottom:1px solid #edf1f5;
  padding:14px 0
}
.detail-entry:last-child {
  border:0
}
.detail-entry h3 {
  margin-bottom:6px
}
.detail-entry p {
  margin:0 0 8px;
  color:var(--muted)
}
.profile-side {
  align-self:start;
  position:sticky;
  top:96px
}
.coverage-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  padding:7px 0;
  gap:10px
}
.editor-field {
  margin-bottom:24px
}
.editor-field .between {
  margin-bottom:9px
}
.editor-field textarea {
  min-height:145px
}
.saved-step {
  padding:17px;
  border:1px solid var(--line);
  border-radius:14px;
  margin:12px 0
}
.saved-step p {
  font-size:12px
}
.studio-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 246px;
  border:1px solid var(--line);
  border-radius:21px;
  background:white;
  overflow:hidden;
  min-height:calc(100vh - 157px)
}
.studio-main {
  display:flex;
  flex-direction:column;
  min-width:0
}
.studio-bar {
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #edf1f5;
  align-items:center
}
.studio-bar h2 {
  font-size:15px;
  margin:0
}
.studio-center {
  padding:44px 34px 24px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.studio-center .mascot {
  width:83px;
  height:83px;
  margin:0 auto 18px
}
.studio-center h1 {
  font-size:31px
}
.studio-center p {
  font-size:12px;
  color:var(--muted)
}
.intent-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:535px;
  width:100%;
  margin:20px auto;
  gap:12px
}
.intent {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  text-align:left;
  color:var(--navy)
}
.intent strong {
  font-size:12px;
  display:block;
  margin:4px 0 7px
}
.intent small {
  font-size:10px;
  color:var(--muted);
  line-height:1.5
}
.intent.selected {
  border-color:#9fd0f5;
  background:#f5faff
}
.intent .label-icon {
  width:31px;
  height:31px;
  flex-shrink:0
}
.composer {
  margin:20px 25px 25px;
  border:1px solid #b6cfe1;
  border-radius:18px;
  box-shadow:0 5px 16px #09133705;
  padding:16px
}
.composer textarea {
  border:0;
  box-shadow:none;
  min-height:65px;
  padding:0;
  font-size:13px
}
.composer-footer {
  border-top:1px solid #eef2f5;
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap
}
.composer-footer select {
  width:auto;
  font-size:10px;
  padding:8px;
  background:#f7f9fb;
  border:0
}
.studio-options {
  margin-top:9px
}
.studio-options label {
  font-size:11px
}
.history-panel {
  background:#fafcfd;
  border-left:1px solid var(--line);
  padding:23px 17px;
  min-width:0
}
.history-panel h3 {
  font-size:12px;
  margin-bottom:24px
}
.history-card {
  width:100%;
  text-align:left;
  padding:15px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:white;
  margin-bottom:9px;
  color:var(--navy)
}
.history-card.selected {
  border-color:#a4cdec;
  background:var(--light)
}
.history-card strong {
  font-size:11px;
  line-height:1.5;
  display:block
}
.history-card small {
  color:var(--muted);
  font-size:9px;
  display:block;
  margin-top:7px
}
.draft-editor {
  padding:27px;
  flex:1
}
.draft-editor input {
  font-size:20px;
  letter-spacing:-.5px;
  border:0;
  padding:0 0 15px;
  font-weight:600;
  box-shadow:none
}
.draft-editor textarea {
  min-height:340px;
  border:0;
  box-shadow:none;
  padding:15px 0;
  line-height:1.9;
  font-size:13px
}
.draft-meta {
  border-top:1px solid var(--line);
  padding-top:14px;
  font-size:11px;
  color:var(--muted)
}
.code-display {
  letter-spacing:8px;
  font-size:32px;
  font-weight:600;
  color:var(--navy);
  margin:24px 0
}
.numbered-step {
  display:flex;
  gap:17px;
  margin:25px 0
}
.numbered-step>span {
  background:var(--light);
  border-radius:50%;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  color:var(--blue);
  flex-shrink:0;
  font-size:12px
}
.numbered-step p {
  font-size:12px;
  color:var(--muted);
  margin:5px 0
}
.scan-strip {
  padding:14px 18px;
  border:1px solid #d8e8f5;
  background:#f1f8fe;
  border-radius:15px;
  margin-bottom:22px;
  display:flex;
  gap:16px;
  align-items:center;
  font-size:12px
}
.scan-strip .progress {
  flex:1;
  max-width:140px
}
.source-card .eyebrow {
  color:var(--blue);
  font-size:9px;
  letter-spacing:1px
}
.source-card h3 {
  font-size:15px;
  line-height:1.5;
  margin:16px 0 10px
}
.source-card p {
  font-size:12px;
  color:var(--muted)
}
.source-card a {
  font-size:11px
}
.task {
  display:flex;
  gap:13px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding:19px 0
}
.task:last-child {
  border:0
}
.task input {
  margin-top:3px;
  flex-shrink:0
}
.task h3 {
  font-size:13px;
  margin:0 0 6px
}
.task p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.task.done h3 {
  text-decoration:line-through;
  color:var(--muted)
}
dialog {
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  width:min(640px,calc(100% - 30px));
  max-height:90vh;
  box-shadow:0 20px 80px #09133726;
  color:var(--navy)
}
dialog::backdrop {
  background:#09133766;
  backdrop-filter:blur(4px)
}
dialog h2 {
  font-size:23px
}
.modal-close {
  float:right;
  min-height:32px!important;
  padding:6px!important;
  width:32px
}
.onboard-progress {
  display:flex;
  gap:6px;
  margin:20px 0 29px
}
.onboard-progress span {
  height:4px;
  flex:1;
  background:#e9eff4;
  border-radius:4px
}
.onboard-progress span.active {
  background:var(--blue)
}
.choice {
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
  cursor:pointer;
  font-size:12px
}
.choice:has(input:checked) {
  background:var(--light);
  border-color:#b7d9f4
}
.toast-stack {
  position:fixed;
  bottom:24px;
  right:25px;
  z-index:1000;
  display:grid;
  gap:8px;
  max-width:400px
}
.toast {
  padding:14px 20px;
  background:var(--navy);
  border:1px solid #1d2c50;
  color:white;
  border-radius:14px;
  box-shadow:0 6px 25px #09133730;
  font-size:12px;
  line-height:1.6
}
.toast.error {
  background:#923d30
}
.loading-screen {
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  color:var(--muted)
}
.loading-screen img {
  width:110px
}
.auth-page {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh
}
.auth-visual {
  background:linear-gradient(145deg,#091337,#122d70);
  color:white;
  padding:50px 65px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.auth-brand img {
  width:112px;
  filter:brightness(0) invert(1)
}
.auth-copy {
  max-width:490px;
  padding:50px 0
}
.auth-copy h1 {
  color:white;
  font-size:48px;
  letter-spacing:-2px;
  line-height:1.14;
  margin:20px 0
}
.auth-copy h1 span {
  color:var(--cyan)
}
.auth-copy .eyebrow {
  color:#b0cdf3
}
.auth-copy p {
  font-size:14px;
  color:#b5c6df;
  max-width:360px
}
.auth-copy .mascot {
  width:120px;
  height:120px;
  margin-top:28px
}
.auth-footer {
  font-size:10px;
  color:#adc4e0
}
.auth-panel {
  padding:50px;
  display:grid;
  place-items:center;
  background:white
}
.auth-box {
  width:100%;
  max-width:390px
}
.auth-box h2 {
  font-size:28px
}
.auth-box>p {
  font-size:12px;
  margin-bottom:28px
}
.auth-form .btn {
  width:100%;
  margin-top:10px
}
.auth-form .checkbox {
  font-size:11px;
  display:flex;
  gap:8px;
  align-items:flex-start
}
.auth-form label {
  font-size:12px
}
.auth-form .form-meta {
  display:flex;
  justify-content:flex-end;
  font-size:11px
}
.security-note {
  display:flex;
  gap:10px;
  margin-top:28px;
  color:var(--muted);
  font-size:11px;
  line-height:1.6
}
.security-note svg {
  flex-shrink:0
}
.verification {
  max-width:500px;
  margin:90px auto
}
.mobile-menu {
  border:0;
  background:transparent;
  color:var(--navy);
  font-size:22px
}
@media(min-width:1600px) {
  .workspace {
    padding:38px 46px
  }
.metric-value {
    font-size:34px!important
  }
.chart {
    height:250px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:214px;
    padding:25px 15px
  }
.app-main {
    margin-left:214px
  }
.workspace {
    padding:28px 24px
  }
.topbar {
    padding:0 24px
  }
.cols4 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.profile-layout {
    grid-template-columns:minmax(0,1fr) 285px
  }
.studio-layout {
    grid-template-columns:minmax(0,1fr) 205px
  }
.studio-center {
    padding:30px 22px
  }
.studio-center h1 {
    font-size:27px
  }
.intent {
    padding:13px
  }
.score-wrap {
    gap:14px
  }
.score-ring {
    width:106px;
    height:106px
  }
}
@media(max-width:960px) {
  .sidebar {
    width:190px
  }
.app-main {
    margin-left:190px
  }
.sidebar-promo {
    padding:12px
  }
.profile-layout,.dashboard-main {
    grid-template-columns:1fr
  }
.profile-side {
    position:static
  }
.cols3 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.studio-layout {
    grid-template-columns:1fr
  }
.history-panel {
    border-left:0;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:10px
  }
.history-panel h3 {
    width:100%;
    margin-bottom:8px
  }
.history-card {
    max-width:190px
  }
.auth-copy h1 {
    font-size:39px
  }
.auth-visual {
    padding:40px
  }
.auth-panel {
    padding:30px
  }
}
@media(max-width:720px) {
  .sidebar {
    transform:translateX(-100%);
    width:245px;
    box-shadow:10px 0 50px #09133726
  }
.sidebar.open {
    transform:translateX(0)
  }
.app-main {
    margin-left:0
  }
.topbar {
    height:64px;
    padding:0 18px
  }
.topbar .mobile-menu {
    display:block
  }
.topbar .chip {
    display:none
  }
.workspace {
    padding:24px 16px
  }
.page-heading {
    align-items:flex-start;
    flex-direction:column
  }
.page-heading h1 {
    font-size:28px
  }
.page-heading .btn {
    min-height:37px
  }
.cols2,.cols3 {
    grid-template-columns:1fr
  }
.cols4 {
    gap:10px
  }
.card {
    padding:20px
  }
.metric-card {
    padding:16px
  }
.metric-card .metric-value {
    font-size:26px
  }
.metric-card .between {
    margin-bottom:16px
  }
.metric-card .label-icon {
    display:none
  }
.assistant-banner {
    flex-wrap:wrap;
    padding:18px;
    gap:12px
  }
.assistant-banner .btn {
    margin-left:0
  }
.assistant-banner .mascot {
    width:50px;
    height:50px
  }
.studio-layout {
    border-radius:15px;
    min-height:75vh
  }
.studio-center {
    padding:30px 18px 10px
  }
.studio-center h1 {
    font-size:25px
  }
.intent-grid {
    gap:9px
  }
.intent {
    display:block;
    padding:13px
  }
.intent .label-icon {
    margin-bottom:6px
  }
.composer {
    margin:18px 14px
  }
.composer-footer .btn {
    width:100%
  }
.draft-editor {
    padding:20px
  }
.draft-editor textarea {
    min-height:300px
  }
.scan-strip {
    flex-wrap:wrap
  }
.scan-strip .progress {
    max-width:none
  }
.auth-page {
    grid-template-columns:1fr
  }
.auth-visual {
    padding:27px 25px 18px
  }
.auth-copy {
    padding:22px 0 0
  }
.auth-copy h1 {
    font-size:32px;
    max-width:330px;
    margin:12px 0
  }
.auth-copy p,.auth-copy .mascot,.auth-footer {
    display:none
  }
.auth-panel {
    padding:32px 25px
  }
.auth-brand img {
    width:90px
  }
.auth-box h2 {
    font-size:25px
  }
.toast-stack {
    right:15px;
    left:15px;
    bottom:15px
  }
.profile-content,.profile-intro {
    padding-left:20px;
    padding-right:20px
  }
.profile-card {
    padding:0
  }
.profile-cover {
    height:110px
  }
dialog {
    padding:22px
  }
.between {
    flex-wrap:wrap
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}
#ai-operation {
  position:fixed;
  z-index:1500;
  right:24px;
  bottom:24px;
  width:min(440px,calc(100vw - 32px));
  display:flex;
  gap:16px;
  padding:22px;
  background:#fff;
  border:1px solid #bdd7ee;
  border-radius:20px;
  box-shadow:0 12px 60px #09133724;
  color:#091337
}
#ai-operation p {
  margin:8px 0;
  line-height:1.5
}
#ai-operation.failed {
  border-color:#b84f37;
  flex-wrap:wrap
}
.ai-spinner {
  width:28px;
  height:28px;
  flex-shrink:0;
  border:3px solid #eaf4fd;
  border-top-color:#0a66c2;
  border-radius:50%;
  animation:ai-spin .9s linear infinite
}
.uploaded-profile-image {
  display:block;
  width:100%;
  height:130px;
  object-fit:contain;
  border-radius:12px;
  background:#f4f7fb;
  margin:12px 0
}
@keyframes ai-spin {
  to {
    transform:rotate(360deg)
  }
}
@media(prefers-reduced-motion:reduce) {
  .ai-spinner {
    animation:none
  }
}

/* AKTARIM PANELİ
   Eski şerit tek satırdı: "arka planda okunuyor" + sabit %30'luk bir çubuk.
   Kullanıcı arkada ne olduğunu göremiyordu. Bu panel toplayıcının GERÇEK
   aşamalarını gösterir; her satırdaki sayı sunucudan gelen yapısal rapordan
   okunur, animasyon o veriyi süslemez, yalnızca hangisinin etkin olduğunu
   belirtir. */
.scan-panel {
  border:1px solid #d8e8f5;
  background:linear-gradient(180deg,#f6fbff,#f1f8fe);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:22px
}
.scan-panel.failed { border-color:#f3d2c4; background:#fdf6f2 }
.scan-panel.done { border-color:#c9e9da; background:linear-gradient(180deg,#f4fcf8,#eefaf4) }
.scan-panel-head { display:flex; align-items:center; gap:13px; margin-bottom:16px }
.scan-panel-head h3 { font-size:15px; margin:0 0 2px }
.scan-panel-head p { margin:0 }
.scan-panel-head > div { flex:1; min-width:0 }

/* Etkin göstergesi: veri geldiğini değil, işlemin sürdüğünü anlatır. */
.scan-pulse {
  width:11px; height:11px; border-radius:50%;
  background:var(--blue); flex:none;
  box-shadow:0 0 0 0 rgba(10,102,194,.45);
  animation:scanPulse 1.8s ease-out infinite
}
.scan-pulse.off { background:#c2683c; animation:none }
@keyframes scanPulse {
  70% { box-shadow:0 0 0 9px rgba(10,102,194,0) }
  100% { box-shadow:0 0 0 0 rgba(10,102,194,0) }
}
.scan-check { color:var(--green); display:flex; flex:none }
.scan-check .icon { width:22px; height:22px; stroke-width:2.2 }

.scan-steps { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:2px }
.scan-steps .step { display:flex; align-items:flex-start; gap:12px; padding:7px 0; position:relative }
/* Adımları birleştiren çizgi: tamamlananlar dolu, bekleyenler soluk. */
.scan-steps .step::before {
  content:''; position:absolute; left:8px; top:26px; bottom:-4px;
  width:2px; background:var(--line)
}
.scan-steps .step:last-child::before { display:none }
.scan-steps .step.done::before { background:#9ed3b9 }
.scan-step-hidden { display:none }
.step-dot {
  width:18px; height:18px; border-radius:50%; flex:none; margin-top:1px;
  border:2px solid var(--line); background:white;
  display:flex; align-items:center; justify-content:center; color:white
}
.step.done .step-dot { background:var(--green); border-color:var(--green) }
.step.done .step-dot .icon { width:11px; height:11px; stroke-width:3 }
.step.live .step-dot { border-color:var(--blue); background:var(--blue); animation:stepLive 1.4s ease-in-out infinite }
.step.failed .step-dot { border-color:#c2683c; background:#c2683c }
@keyframes stepLive { 50% { transform:scale(.72) } }
.step-body { display:flex; flex-direction:column; gap:1px; min-width:0 }
.step-body strong { font-size:13px; font-weight:600; color:var(--muted) }
.step.live .step-body strong, .step.done .step-body strong { color:var(--navy) }
.step-meta { font-size:11.5px; color:var(--muted) }
.step-meta code {
  font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#e7f1fa; color:#3f5a76; padding:1px 6px; border-radius:5px
}

/* Özet: aktarım bitince kaybolmaz, ne geldiğini sayılarla söyler. */
.scan-sums { display:grid; gap:10px; margin-bottom:14px }
.sum-group { display:flex; align-items:flex-start; gap:11px }
.sum-group strong { font-size:13px; display:block }
.sum-group p { margin:1px 0 0; word-break:break-word }
.sum-count {
  min-width:26px; height:24px; padding:0 7px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 Inter,Arial; color:white; background:var(--muted)
}
.sum-count.ok { background:var(--green) }
.sum-count.neutral { background:#7d8a99 }
.sum-count.warn { background:#b8791f }
.sum-count.off { background:#9aa6b2 }
.scan-facts {
  display:flex; flex-wrap:wrap; gap:8px 20px;
  border-top:1px solid #d5ece1; padding-top:12px;
  font-size:12.5px; color:var(--muted)
}
.scan-facts strong { color:var(--navy); font-size:14px }

@media (max-width:640px) {
  .scan-panel-head { flex-wrap:wrap }
  .scan-facts { gap:6px 14px }
}
@media (prefers-reduced-motion:reduce) {
  .scan-pulse, .step.live .step-dot { animation:none }
}