/* Shared form + admin styling for the designer sign-up (/join/designer) and
   the admin panel (/admin). Same control-room chrome as the rest of the site:
   dark panels, amber accents, monospace. Loaded after style.css + profile.css. */

.page { flex: 1 1 auto; width: min(1080px, 100% - 28px); margin: 12px auto 20px; display: flex; flex-direction: column; gap: 12px; }
.page h1 { font-size: clamp(20px, 3.2vw, 30px); letter-spacing: .16em; color: #fff; }
.page .lead { font-size: 13px; line-height: 1.6; color: #d9c6a6; max-width: 720px; }
.panel h2 small { font-weight: 400; letter-spacing: .06em; color: #8d7a5f; margin-left: 8px; }
.panel .help { font-size: 11px; line-height: 1.55; color: #a99678; margin: -4px 0 10px; }

/* fields */
.f { display: flex; flex-direction: column; gap: 4px; font-size: 9px; letter-spacing: .14em; color: #8d7a5f; min-width: 0; }
.f b { color: var(--amber); font-weight: 400; }
.f input, .f select, .f textarea, .f-inline input, .f-inline select {
  font: inherit; font-size: 12px; letter-spacing: 0; padding: 7px 9px;
  background: #0f0c09; color: var(--cream); border: 1px solid var(--line); width: 100%;
}
.f textarea { resize: vertical; min-height: 72px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--amber); }
.f .count { font-size: 9px; color: #6f5f48; letter-spacing: .06em; align-self: flex-end; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.prefix { display: flex; align-items: center; gap: 6px; }
.prefix span { font-size: 11px; color: #8d7a5f; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* rate rows */
.rate-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.4fr auto; gap: 8px; align-items: end; padding: 10px; border: 1px dashed var(--line); }
.rate-row + .rate-row { margin-top: 8px; }
.rate-row .del, .card .del { font: inherit; font-size: 10px; letter-spacing: .1em; color: #ff9a9a; background: none; border: 1px solid #5a2a2a; padding: 7px 9px; cursor: pointer; }
.rate-row .del:hover, .card .del:hover { background: #2a1414; }
.add-btn { font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #ffd27a; background: var(--panel-2); border: 1px solid var(--amber); padding: 8px 12px; cursor: pointer; margin-top: 10px; }
.add-btn:hover { background: var(--amber); color: #1a1206; }
.add-btn:disabled { opacity: .4; cursor: not-allowed; }

/* project cards */
.project { border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #15100b; }
.project + .project { margin-top: 10px; }
.project-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-head b { font-size: 10px; letter-spacing: .2em; color: #ffd27a; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.photo { position: relative; aspect-ratio: 1; background: #000; border: 1px solid var(--line); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.uploading::after { content: '…'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #ffd27a; font-size: 18px; }
.photo.failed::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(90,0,0,.6); color: #fff; font-size: 18px; }
.photo .x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; font-size: 11px; line-height: 16px; text-align: center; background: rgba(0,0,0,.7); color: #fff; border: 1px solid #000; cursor: pointer; }
.photo-add { aspect-ratio: 1; display: grid; place-items: center; border: 1px dashed var(--amber); color: #ffd27a; font-size: 10px; letter-spacing: .1em; cursor: pointer; text-align: center; padding: 4px; }
.photo-add:hover { background: rgba(232,132,46,.12); }
.photo-add input { display: none; }
.photo-add.full { opacity: .35; cursor: not-allowed; }

/* status + actions */
.error { font-size: 11px; color: #ff9a9a; border: 1px solid #7a3030; background: #2a1414; padding: 8px 10px; }
.error[hidden], [hidden] { display: none !important; }
.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.note { font-size: 10px; color: #8d7a5f; letter-spacing: .06em; line-height: 1.5; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: wait; }
.done { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; }
.done b { font-size: 15px; color: #ffd27a; letter-spacing: .06em; }
.done code { background: #0f0c09; border: 1px solid var(--line); padding: 2px 6px; color: #9fe3b6; }

/* ── Admin ───────────────────────────────────────────────────────────── */
.admin-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-bar .who { font-size: 10px; letter-spacing: .1em; color: #9fe3b6; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .14em; padding: 7px 11px; background: var(--panel-2); color: #d9c6a6; border: 1px solid var(--line); cursor: pointer; }
.tab.on { background: var(--amber); color: #1a1206; border-color: #7a5a0e; }
.tab .n { margin-left: 6px; color: #ffd27a; }
.tab.on .n { color: #1a1206; }
.filters { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 8px; align-items: end; }
.table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table th { text-align: left; font-size: 9px; letter-spacing: .16em; color: #8d7a5f; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 8px; border-bottom: 1px dotted var(--line); vertical-align: top; }
.table tr.row-btn { cursor: pointer; }
.table tr.row-btn:hover td { background: #241b12; }
.table tr.sel td { background: #2b2015; }
.table .muted { color: #8d7a5f; }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; font-size: 9px; letter-spacing: .12em; padding: 2px 6px; border: 1px solid; }
.badge.pending { color: #ffd27a; border-color: #8d6a2f; }
.badge.approved { color: #9fe3b6; border-color: #2f5a33; }
.badge.rejected { color: #ff9a9a; border-color: #7a3030; }
.badge.suspended { color: #cfc7bb; border-color: #6f6a62; }
.empty { padding: 30px; text-align: center; color: #8d7a5f; font-size: 11px; letter-spacing: .12em; }

.detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.detail .full { grid-column: 1 / -1; }
.kv { display: flex; flex-direction: column; gap: 6px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--line); padding-bottom: 5px; font-size: 11px; }
.kv dt { color: #8d7a5f; letter-spacing: .1em; font-size: 9px; }
.kv dd { text-align: right; color: var(--cream); word-break: break-word; }
.kv dd a { color: #9fe3b6; }
.rates { width: 100%; border-collapse: collapse; font-size: 11px; }
.rates th, .rates td { text-align: left; padding: 5px 6px; border-bottom: 1px dotted var(--line); }
.rates th { font-size: 9px; letter-spacing: .14em; color: #8d7a5f; }
.proj { border: 1px solid var(--line); padding: 10px; margin-top: 8px; }
.proj h3 { font-size: 11px; letter-spacing: .1em; color: #fff; }
.proj .meta { font-size: 10px; color: var(--accent, #dbe8ff); margin: 3px 0 6px; letter-spacing: .08em; }
.proj p { font-size: 11px; line-height: 1.5; color: #cbbba0; }
.proj .photos { margin-top: 8px; }
.proj .photos a { display: block; }
.review { display: flex; flex-direction: column; gap: 10px; }
.review .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.ok { border-color: #2f5a33; background: #1f6b33; color: #fff; }
.btn.ok:hover { background: #2a8a44; }
.btn.bad { border-color: #7a3030; background: #5a1d1d; color: #fff; }
.btn.bad:hover { background: #7a2a2a; }
.btn.warn { border-color: #6f6a62; background: #4a463f; color: #fff; }
.trail { font-size: 10px; line-height: 1.6; color: #8d7a5f; }
.trail b { color: #d9c6a6; }

/* login */
.login { width: min(420px, 100% - 24px); margin: 8vh auto; }
.login .panel { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 760px) {
  .row, .row-3, .filters, .detail { grid-template-columns: 1fr; }
  .rate-row { grid-template-columns: 1fr 1fr; }
  .page { width: calc(100% - 16px); }
  .brand .title { display: none; }
}