/* dashboard.css — the product surface */
.dash-top { border-bottom: 1px solid var(--hairline); background: #fff; position: sticky; top: 0; z-index: 40; }
.dash-top-inner { display: flex; align-items: center; gap: 14px; height: 60px; }
.dash-crumb { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.dash-crumb .sep { color: var(--gray-300); }
.dash-crumb .team { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#000,#444); display: grid; place-items: center; color: #fff; font-size: .7rem; font-weight: 600; }
.dash-top .nav-right { margin-left: auto; }

.dash-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 100px; }

/* dropzone */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--gray-300); border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: 56px 32px; text-align: center;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.dropzone .dz-tri { font-size: 2rem; color: var(--gray-300); transition: color .2s, transform .3s var(--ease); }
.dropzone h2 { font-size: 1.5rem; margin-bottom: 8px; }
.dropzone .dz-sub { color: var(--gray-500); font-size: .95rem; margin-bottom: 22px; }
.dropzone .dz-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dropzone .dz-hint { margin-top: 18px; font-size: .8rem; color: var(--gray-400); font-family: var(--font-mono); }
body.drag .dropzone, .dropzone.drag { border-color: var(--ink); background: #fff; transform: scale(1.005); box-shadow: var(--shadow); }
body.drag .dropzone .dz-tri, .dropzone.drag .dz-tri { color: var(--ink); transform: translateY(-4px); }
.dropzone.reading { opacity: .6; pointer-events: none; }
.dz-fullhint { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: none; place-items: center; pointer-events: none; }
body.drag .dz-fullhint { display: grid; }
.dz-fullhint .box { border: 2px dashed #fff; border-radius: 16px; padding: 60px 80px; color: #fff; text-align: center; font-size: 1.4rem; font-weight: 500; }
.dz-fullhint .box .tri { font-size: 1.4rem; }

.section-label { display: flex; align-items: center; justify-content: space-between; margin: 44px 0 16px; }
.section-label h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

/* project card (production tile) */
.proj-card { padding: 0; margin-bottom: 20px; }
.proj-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px; gap: 16px; border-bottom: 1px solid var(--hairline); }
.proj-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.prod-preview { display: block; position: relative; height: 260px; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--hairline); }
.prod-frame { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.prod-preview-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-top: 1px solid var(--hairline); font-size: .82rem; }
.prod-preview-bar .prod-open { margin-left: auto; color: var(--accent); font-weight: 500; }
.prod-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); }
.prod-meta > div { background: #fff; padding: 14px 24px; display: flex; flex-direction: column; gap: 5px; font-size: .9rem; }
.prod-meta-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); font-family: var(--font-mono); }
@media (max-width: 720px) { .prod-meta { grid-template-columns: repeat(2, 1fr); } }

/* history */
.hist-wrap { border-top: 1px solid var(--hairline); }
.hist-wrap summary { padding: 14px 24px; cursor: pointer; font-size: .88rem; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
.hist-wrap summary::-webkit-details-marker { display: none; }
.hist-wrap summary::before { content: "▸"; color: var(--gray-400); transition: transform .15s; }
.hist-wrap[open] summary::before { transform: rotate(90deg); }
.hist-rows { padding: 0 8px 8px; }
.hist-row { display: grid; grid-template-columns: auto 1fr 1.4fr auto auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius); font-size: .85rem; transition: background .12s; }
.hist-row:hover { background: var(--bg-subtle); }
.hist-id { color: var(--gray-700); }
.hist-id:hover { color: var(--accent); }
.hist-commit { color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta, .hist-when { color: var(--gray-400); font-size: .78rem; white-space: nowrap; }
@media (max-width: 760px) { .hist-row { grid-template-columns: auto 1fr auto; } .hist-commit, .hist-meta, .hist-when { display: none; } }

.empty-state { text-align: center; padding: 30px; color: var(--gray-400); font-size: .9rem; }

/* starter gallery */
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.starter-card { display: flex; flex-direction: column; }
.starter-thumb { aspect-ratio: 16/10; background: var(--bg-2); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; }
.starter-thumb svg, .starter-thumb img { width: 100%; height: 100%; object-fit: cover; }
.starter-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.starter-body h4 { font-size: 1rem; }
.starter-body p { font-size: .84rem; color: var(--gray-500); margin: 0; flex: 1; line-height: 1.45; }
.starter-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-family: var(--font-mono); font-size: .68rem; padding: 3px 8px; border-radius: 100px; background: var(--bg-2); color: var(--gray-600); }
.starter-foot { padding: 0 16px 16px; }

/* deploy overlay */
.deploy-overlay { position: fixed; inset: 0; z-index: 100; display: none; }
.deploy-overlay.open { display: block; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.overlay-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: pop .24s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translate(-50%,-46%) scale(.97); } }
.overlay-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.overlay-head .tri { font-size: .9rem; }
.overlay-head h3 { font-size: 1.05rem; }
.overlay-head .status-slot { margin-left: auto; }
.overlay-body { padding: 22px; overflow-y: auto; }
.overlay-foot { padding: 16px 22px; border-top: 1px solid var(--hairline); display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

.summary-line { padding: 12px 14px; background: var(--bg-subtle); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: .9rem; margin-bottom: 18px; }
.root-picker, .secret-note { margin-top: 16px; }
.secret-note { display: flex; gap: 10px; padding: 12px 14px; background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.3); border-radius: var(--radius); font-size: .84rem; color: #7a5a00; }
.secret-note .tri { color: var(--warn); flex-shrink: 0; }

/* build log terminal */
.build-phases { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.phase { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--gray-400); font-family: var(--font-mono); }
.phase::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-300); box-sizing: border-box; transition: all .2s; }
.phase[data-state="run"] { color: var(--ink); }
.phase[data-state="run"]::before { border-color: var(--warn); border-top-color: transparent; animation: spin .7s linear infinite; }
.phase[data-state="done"] { color: var(--gray-600); }
.phase[data-state="done"]::before { background: var(--success); border-color: var(--success); }
.build-log {
  background: #0a0a0a; color: #e5e5e5; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.7;
  padding: 16px 18px; height: 340px; overflow-y: auto; scroll-behavior: smooth;
}
.log-line { display: flex; gap: 12px; white-space: pre-wrap; word-break: break-word; animation: logIn .18s var(--ease); }
@keyframes logIn { from { opacity: 0; transform: translateY(3px); } }
.log-ts { color: #555; flex-shrink: 0; user-select: none; }
.log-txt b { color: #fff; font-weight: 500; }
.log-txt .mono { color: #7dd3fc; }
.log-dim, .log-line.log-dim .log-txt { color: #737373; }
.log-ok .log-txt { color: #4ade80; }
.log-ready .log-txt { color: #4ade80; font-weight: 500; }
.log-warn .log-txt { color: #fbbf24; }
.log-up .log-txt { color: #a3a3a3; }
.log-env .log-txt { color: #c4b5fd; }
.log-redact { color: #f87171; background: rgba(248,113,113,.12); padding: 0 5px; border-radius: 3px; letter-spacing: .04em; }

/* success step */
.success-step { text-align: center; }
.success-badge { width: 60px; height: 60px; border-radius: 50%; background: rgba(12,206,107,.1); display: grid; place-items: center; margin: 4px auto 18px; animation: pop .4s var(--ease); }
.success-badge svg { width: 30px; height: 30px; color: var(--success-d); }
.success-step h2 { font-size: 1.7rem; margin-bottom: 6px; }
.success-step .sub { color: var(--gray-500); margin-bottom: 22px; }
.live-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; text-align: left; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.live-card:hover { box-shadow: var(--shadow-lg); }
.live-preview { height: 220px; overflow: hidden; background: var(--bg-2); position: relative; border-bottom: 1px solid var(--hairline); }
.live-preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.live-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.live-bar .dot { flex-shrink: 0; }
.live-domain { font-family: var(--font-mono); font-size: .9rem; font-weight: 500; }
.live-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.share-row { margin-top: 16px; font-size: .82rem; color: var(--gray-400); }
.inspect-row { margin-top: 8px; font-size: .8rem; }
.inspect-row a { color: var(--accent); font-family: var(--font-mono); }

/* rollback dialog */
.rb-dialog { position: fixed; inset: 0; z-index: 110; display: none; }
.rb-dialog.open { display: block; }
.rb-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(500px, calc(100vw - 32px)); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop .2s var(--ease); overflow: hidden; }
.rb-panel h3 { padding: 20px 22px 0; }
.rb-panel .rb-body { padding: 16px 22px; }
.rb-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 8px 0 16px; }
.rb-box { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; }
.rb-box.cur { border-color: rgba(0,112,243,.4); }
.rb-box.tgt { border-color: rgba(12,206,107,.4); background: rgba(12,206,107,.04); }
.rb-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); font-family: var(--font-mono); margin-bottom: 6px; }
.rb-id { font-size: .82rem; font-weight: 500; }
.rb-arrow { color: var(--gray-400); font-size: 1.2rem; }
.rb-verify { background: var(--bg-subtle); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; font-size: .82rem; color: var(--gray-600); }
.rb-verify li { margin: 3px 0; }
.rb-foot { padding: 14px 22px; border-top: 1px solid var(--hairline); display: flex; gap: 10px; justify-content: flex-end; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius); font-size: .88rem; opacity: 0; transition: opacity .25s, transform .25s; box-shadow: var(--shadow); }
.toast.in { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .rb-compare { grid-template-columns: 1fr; }
  .rb-arrow { transform: rotate(90deg); }
  .overlay-panel { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
  .build-log { height: 280px; }
}