/* ============================================================================
   FOUNDRY CONTROL — mobile PWA styling (embedded phone + operational context)
   ========================================================================== */

.fctl-screen-wrap { min-height: 0; }
.fctl-stage {
  display: grid; grid-template-columns: 392px minmax(0, 1fr); gap: var(--s-7);
  align-items: start;
}

/* ---------------------------------------------------------- PHONE SHELL -- */
.fctl-phone { display: flex; justify-content: center; }
.fctl-bezel {
  width: 392px; height: min(816px, calc(100vh - 188px));
  background: #05050a; border-radius: 42px; border: 1px solid var(--hairline-3);
  padding: 9px 9px 11px; display: flex; flex-direction: column;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 2px #15131d;
  position: relative; overflow: hidden;
}
.fctl-statusbar {
  flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em;
}
.fctl-notch { width: 86px; height: 18px; background: #05050a; border-radius: 0 0 12px 12px; }
.fctl-sbicons { display: inline-flex; align-items: center; gap: 6px; }
.fctl-app {
  flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column;
  background: var(--obsidian); border-radius: 32px; overflow: hidden; border: 1px solid var(--hairline);
}
.fctl-view { flex: 1; min-height: 0; overflow-y: auto; }
.fctl-pad { padding: 16px 15px 22px; }

/* bottom nav */
.fctl-nav {
  flex: none; display: flex; height: 62px; border-top: 1px solid var(--hairline-2);
  background: rgba(11,10,19,0.86); backdrop-filter: blur(14px);
}
.fctl-navbtn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; cursor: pointer; color: var(--ink-4); position: relative;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  transition: color var(--dur-fast);
}
.fctl-navbtn:hover { color: var(--ink-2); }
.fctl-navbtn.on { color: var(--violet-ink); }
.fctl-navbtn.on::before { content: ""; position: absolute; top: 0; width: 26px; height: 2px; border-radius: 99px; background: var(--violet-bright); box-shadow: 0 0 10px var(--violet-bright); }

/* ------------------------------------------------------------- ATOMS ---- */
.fctl-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.fctl-h b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fctl-h span { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-top: 3px; }
.fctl-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--hairline-2); white-space: nowrap; }

.fctl-dot { width: 6px; height: 6px; border-radius: 99px; box-shadow: 0 0 6px currentColor; flex: none; display: inline-block; }
.fctl-dot.live { animation: fctlPulse 1.6s var(--ease-inout) infinite; }
@keyframes fctlPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
body.no-motion .fctl-dot.live { animation: none; }

.fctl-seclabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin: 16px 0 9px; }

/* dashboard cards */
.fctl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fctl-card { text-align: left; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 13px; padding: 12px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.fctl-card:hover { border-color: var(--hairline-3); background: var(--panel-3); }
.fctl-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.fctl-card-v { font-family: var(--font-mono); font-size: 27px; font-weight: 600; line-height: 1; }
.fctl-card-k { font-size: 11px; color: var(--ink-3); margin-top: 5px; }

/* request rows */
.fctl-list { display: flex; flex-direction: column; gap: 8px; }
.fctl-row { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.fctl-row:hover { border-color: var(--hairline-3); background: var(--panel-3); }
.fctl-row-main { flex: 1; min-width: 0; }
.fctl-row-id { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-4); }
.fctl-row-id span { color: var(--violet-ink); }
.fctl-row-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 3px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fctl-row-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fctl-area { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fctl-row-right { display: flex; align-items: center; gap: 4px; flex: none; }
.fctl-chan { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); flex: none; }

/* status chip */
.fctl-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px 4px 8px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.fctl-chip.sm { font-size: 8.5px; padding: 3px 8px 3px 7px; }

/* ------------------------------------------------------------ FORMS ----- */
.fctl-field { display: block; margin-bottom: 13px; }
.fctl-label { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.fctl-input { width: 100%; background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: 9px; padding: 10px 12px; font-family: var(--font-ui); font-size: 13px; color: var(--ink); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); resize: vertical; }
textarea.fctl-input { line-height: 1.5; }
select.fctl-input { appearance: none; cursor: pointer; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.fctl-input:focus { border-color: var(--violet-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-bright) 16%, transparent); }
.fctl-input::placeholder { color: var(--ink-4); }
.fctl-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.fctl-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--hairline-2); background: var(--panel-2); color: var(--ink-3); cursor: pointer; transition: all var(--dur-fast); }
.fctl-tag:hover { color: var(--ink); border-color: var(--hairline-3); }
.fctl-tag.on { background: var(--active-dim); border-color: var(--violet-bright); color: var(--ink); }
.fctl-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 18px; border: 1px dashed var(--hairline-3); border-radius: 10px; color: var(--ink-4); font-size: 11.5px; cursor: pointer; background-image: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(176,148,255,0.025) 9px, rgba(176,148,255,0.025) 18px); transition: border-color var(--dur-fast); }
.fctl-drop:hover { border-color: var(--violet-bright); color: var(--ink-3); }
.fctl-env { display: flex; flex-direction: column; gap: 8px; }
.fctl-envbtn { text-align: left; background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: 10px; padding: 11px 13px; cursor: pointer; transition: all var(--dur-fast); }
.fctl-envbtn b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fctl-envbtn em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); margin-top: 3px; }
.fctl-envbtn:hover { border-color: var(--hairline-3); }
.fctl-envbtn.on { border-color: var(--violet-bright); background: var(--active-dim); }
.fctl-envbtn.on b { color: var(--ink); }
.fctl-envbtn.gold.on { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 12%, transparent); }
.fctl-submit { width: 100%; justify-content: center; gap: 8px; margin-top: 6px; }
.fctl-fineprint { font-size: 11px; line-height: 1.5; color: var(--ink-4); margin-top: 11px; }
.fctl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.fctl-empty .glyph { color: var(--state-clear); }

/* ---------------------------------------------------------- DEPLOYS ----- */
.fctl-dep { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 11px 12px; }
.fctl-dep-main { flex: 1; min-width: 0; }
.fctl-dep-top { display: flex; align-items: center; gap: 8px; }
.fctl-dep-top b { font-size: 12.5px; font-weight: 600; }
.fctl-envtag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--hairline-2); }
.fctl-envtag.preview { color: var(--violet-ink); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.fctl-envtag.production { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold-bright) 40%, transparent); }
.fctl-url { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); text-decoration: none; cursor: pointer; display: inline-block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fctl-url:hover { text-decoration: underline; }
.fctl-dep-right { text-align: right; flex: none; }
.fctl-dep-note { display: block; font-family: var(--font-mono); font-size: 9.5px; }
.fctl-dep-t { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); margin-top: 3px; }

/* ---------------------------------------------------------- SETTINGS ---- */
.fctl-switchrow { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 13px; cursor: pointer; }
.fctl-switchrow b { display: block; font-size: 12.5px; font-weight: 600; }
.fctl-switchrow em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.4; }
.fctl-switch { flex: none; width: 42px; height: 24px; border-radius: 99px; background: var(--graphite); border: 1px solid var(--hairline-2); position: relative; transition: background var(--dur-base), border-color var(--dur-base); }
.fctl-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: var(--ink-3); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.fctl-switch[data-on="true"] { background: var(--active-dim); border-color: var(--violet-bright); }
.fctl-switch[data-on="true"] i { transform: translateX(18px); background: var(--violet-bright); }
.fctl-admin, .fctl-svc { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; }
.fctl-admin-main, .fctl-svc-main { flex: 1; min-width: 0; }
.fctl-admin-main b, .fctl-svc-main b { display: block; font-size: 12.5px; font-weight: 600; }
.fctl-admin-main span, .fctl-svc-main span { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); margin-top: 2px; }
.fctl-ava { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-on-gold, #1a1407); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.fctl-conn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); flex: none; }

/* ----------------------------------------------------------- DETAIL ----- */
.fctl-detail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.fctl-detail-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--hairline); }
.fctl-back { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--hairline-2); background: var(--panel-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: all var(--dur-fast); }
.fctl-back:hover { color: var(--ink); border-color: var(--hairline-3); }
.fctl-detail-head > div { flex: 1; min-width: 0; }
.fctl-detail-id { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.fctl-detail-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

.fctl-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 4px; }
.fctl-meta-grid > div { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 9px; padding: 8px 10px; }
.fctl-meta-grid span { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.fctl-meta-grid b { font-size: 12px; font-weight: 600; }

.fctl-block { margin: 15px 0; }
.fctl-block-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 9px; }
.fctl-desc { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.fctl-accept { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.fctl-accept .glyph { color: var(--state-clear); flex: none; margin-top: 2px; }

/* timeline */
.fctl-timeline { display: flex; flex-direction: column; }
.fctl-tl { display: flex; align-items: center; gap: 11px; position: relative; padding: 5px 0; }
.fctl-tl:not(:last-child)::before { content: ""; position: absolute; left: 8.5px; top: 22px; bottom: -5px; width: 1px; background: var(--hairline-2); }
.fctl-tl.done:not(:last-child)::before { background: color-mix(in srgb, var(--state-clear) 50%, transparent); }
.fctl-tl-node { flex: none; width: 18px; height: 18px; border-radius: 99px; border: 1.5px solid; display: grid; place-items: center; z-index: 1; }
.fctl-tl-l { font-size: 12px; }

/* diff + files */
.fctl-diffstat { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; font-family: var(--font-mono); font-size: 11.5px; }
.fctl-diffstat .add { color: var(--state-clear); }
.fctl-diffstat .del { color: var(--state-crisis); }
.fctl-branch { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-4); margin-left: auto; font-size: 10px; }
.fctl-files { display: flex; flex-direction: column; gap: 5px; }
.fctl-file { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); background: var(--graphite); border: 1px solid var(--hairline); border-radius: 7px; padding: 7px 9px; }
.fctl-file .glyph { color: var(--violet-ink); flex: none; }

/* terminal logs */
.fctl-term { background: var(--graphite); border: 1px solid var(--hairline); border-radius: 9px; padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; box-shadow: inset 0 2px 8px rgba(0,0,0,.35); }
.fctl-logln { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; }
.fctl-log-k { flex: none; min-width: 64px; }
.fctl-log-m { color: var(--ink-4); flex: 1; }
.fctl-logln.ok .fctl-log-k { color: var(--state-clear); }
.fctl-logln.err .fctl-log-k { color: var(--state-crisis); }
.fctl-logln.err .fctl-log-m { color: color-mix(in srgb, var(--state-crisis) 70%, var(--ink-3)); }
.fctl-logln.run .fctl-log-k { color: var(--state-caution); }

/* screenshot evidence */
.fctl-shot { position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--hairline-2); }
.fctl-shot-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #15131f, #15131f 11px, #1b1827 11px, #1b1827 22px); }
.fctl-shot-cap { position: absolute; left: 9px; bottom: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); background: rgba(6,5,12,0.7); padding: 3px 7px; border-radius: 5px; }
.fctl-shot.pending { display: grid; place-items: center; background: var(--graphite); aspect-ratio: 16 / 10; }
.fctl-shot.pending span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }

/* preview url row */
.fctl-preview { display: flex; align-items: center; gap: 9px; background: var(--graphite); border: 1px solid var(--hairline); border-radius: 9px; padding: 9px 11px; }
.fctl-preview .fctl-url { flex: 1; margin-top: 0; }
.fctl-share { flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--hairline-2); background: var(--panel-2); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.fctl-share:hover { color: var(--ink); }

/* action bar */
.fctl-actbar { flex: none; display: flex; gap: 7px; padding: 11px 13px; border-top: 1px solid var(--hairline-2); background: rgba(11,10,19,0.88); backdrop-filter: blur(12px); }
.fctl-actbar .btn { flex: 1; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 12px; }
.fctl-actbar .btn.full { flex: 1; }

/* ------------------------------------------------- CONFIRM SHEET + TOAST -- */
.fctl-sheet-root { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; }
.fctl-sheet-bd { position: absolute; inset: 0; background: rgba(5,4,10,0.6); backdrop-filter: blur(2px); animation: fctlFade .2s var(--ease-out); }
.fctl-sheet { position: relative; width: 100%; background: var(--panel); border-top: 1px solid var(--hairline-3); border-radius: 24px 24px 32px 32px; padding: 22px 20px; text-align: center; box-shadow: 0 -20px 50px rgba(0,0,0,.5); animation: fctlSheetUp .32s var(--ease-out); }
@keyframes fctlSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fctlFade { from { opacity: 0; } to { opacity: 1; } }
.fctl-sheet-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 13px; }
.fctl-sheet-ic.gold { color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold-bright) 40%, transparent); }
.fctl-sheet-ic.danger { color: var(--state-crisis); background: var(--crisis-dim); border: 1px solid color-mix(in srgb, var(--state-crisis) 40%, transparent); }
.fctl-sheet-t { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; }
.fctl-sheet-d { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 8px 0 18px; max-width: 30ch; margin-left: auto; margin-right: auto; }
.fctl-sheet-act { display: flex; gap: 9px; }
.fctl-sheet-act .btn { flex: 1; justify-content: center; }
.fctl-toast { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 25; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink); background: var(--panel-3); border: 1px solid var(--hairline-3); border-radius: 99px; padding: 8px 14px; box-shadow: var(--shadow-2); white-space: nowrap; animation: fctlToast .3s var(--ease-out); }
@keyframes fctlToast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ----------------------------------------------------- CONTEXT COLUMN --- */
.fctl-context { display: flex; flex-direction: column; gap: var(--s-6); max-height: calc(100vh - 188px); overflow-y: auto; padding-right: 4px; }
.fctl-flow { display: flex; flex-direction: column; gap: 12px; }
.fctl-flowstep { display: flex; align-items: flex-start; gap: 11px; }
.fctl-flow-n { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--violet-ink); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); background: var(--active-dim); }
.fctl-flowstep .glyph { flex: none; margin-top: 1px; }
.fctl-flowstep > div { flex: 1; }
.fctl-flowstep b { display: block; font-size: 12.5px; font-weight: 600; }
.fctl-flowstep em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.fctl-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.fctl-legchip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 9px 4px 8px; border-radius: 99px; border: 1px solid; }
.fctl-channels .fctl-ctx-note { font-size: 12px; line-height: 1.55; color: var(--ink-3); margin-bottom: 12px; }
.fctl-channels code { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); background: var(--active-dim); padding: 1px 5px; border-radius: 4px; }
.fctl-chrow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--hairline); }
.fctl-chrow b { font-size: 12.5px; }
.fctl-chrow span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-left: auto; }

/* ------------------------------------------------------- RESPONSIVE ----- */
@media (max-width: 1040px) {
  .fctl-stage { grid-template-columns: 1fr; gap: var(--s-6); }
  .fctl-phone { justify-content: flex-start; }
  .fctl-context { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .fctl-bezel { width: 100%; max-width: 392px; border-radius: 32px; }
}

/* ======================================================= PERMISSIONS ==== */
.fctl-viewseg { margin-left: 4px; }

/* mobile HQ banner */
.fctl-permbar { flex: none; padding: 12px 14px 0; }
.fctl-permbar .fctl-permbanner { margin-bottom: 0; }
.fctl-permbanner { width: 100%; text-align: left; display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding: 11px 12px; border-radius: 12px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--gold-bright) 40%, transparent); background: color-mix(in srgb, var(--gold-bright) 11%, transparent); transition: background var(--dur-fast); }
.fctl-permbanner:hover { background: color-mix(in srgb, var(--gold-bright) 17%, transparent); }
.fctl-permbanner-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold-bright) 38%, transparent); }
.fctl-permbanner-main { flex: 1; min-width: 0; }
.fctl-permbanner-main b { display: block; font-size: 12.5px; font-weight: 600; color: var(--gold-bright); }
.fctl-permbanner-main em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* screen-head pill */
.fctl-permpill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--gold-bright); padding: 6px 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold-bright) 42%, transparent); background: color-mix(in srgb, var(--gold-bright) 12%, transparent); cursor: pointer; transition: background var(--dur-fast); }
.fctl-permpill:hover { background: color-mix(in srgb, var(--gold-bright) 20%, transparent); }

/* permission card */
.fctl-perm { padding: 4px 2px; }
.fctl-perm-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.fctl-perm-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid; }
.fctl-perm-headmain { flex: 1; min-width: 0; }
.fctl-perm-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.fctl-perm-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-top: 4px; }
.fctl-riskchip { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px 3px 7px; border-radius: 99px; border: 1px solid; }

.fctl-perm-agent { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hairline); margin-bottom: 12px; }
.fctl-perm-agent img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; border: 1px solid; }
.fctl-perm-agent > div { flex: 1; min-width: 0; }
.fctl-perm-agent b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.fctl-perm-agent span { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); margin-top: 2px; }
.fctl-perm-cr { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--violet-ink); text-decoration: none; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--hairline-2); background: var(--graphite); }
.fctl-perm-cr:hover { border-color: var(--hairline-3); }
.fctl-perm-detail { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 12px; }
.fctl-perm-scope { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fctl-perm-scopechip { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--hairline-2); background: var(--graphite); }
.fctl-perm-note { display: flex; align-items: flex-start; gap: 7px; font-size: 10.5px; line-height: 1.45; color: var(--ink-4); margin-bottom: 16px; padding: 8px 10px; border-radius: 8px; background: var(--graphite); border: 1px solid var(--hairline); }
.fctl-perm-note .glyph { flex: none; margin-top: 1px; color: var(--ink-3); }
.fctl-perm-act { display: flex; gap: 8px; }
.fctl-perm-act .btn { flex: 1; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 12px; }
.fctl-perm-act .btn.danger { flex: 0 0 auto; padding: 10px 13px; }

.fctl-sheet.wide { border-radius: 24px 24px 32px 32px; padding: 20px 18px; text-align: left; }

/* ======================================================= DESKTOP ======== */
.fctld { display: flex; flex-direction: column; height: calc(100vh - 184px); min-height: 540px; }

.fctld-bar { flex: none; display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-6); }
.fctld-tabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--r-md); }
.fctld-tab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-sm); border: none; background: none; color: var(--ink-3); cursor: pointer; transition: all var(--dur-fast); }
.fctld-tab .glyph { opacity: .8; }
.fctld-tab:hover { color: var(--ink); }
.fctld-tab.on { background: var(--panel-3); color: var(--ink); box-shadow: var(--shadow-inset); }
.fctld-baract { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.fctld-permbtn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--gold-bright); padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--gold-bright) 45%, transparent); background: color-mix(in srgb, var(--gold-bright) 12%, transparent); cursor: pointer; transition: background var(--dur-fast); }
.fctld-permbtn:hover { background: color-mix(in srgb, var(--gold-bright) 20%, transparent); }

.fctld-stats { flex: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: var(--s-6); }
.fctld-stat { text-align: left; background: var(--panel); border: 1px solid var(--hairline); border-radius: 13px; padding: 14px 15px; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.fctld-stat:hover { border-color: var(--hairline-3); transform: translateY(-2px); }
.fctld-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fctld-stat-v { font-family: var(--font-mono); font-size: 32px; font-weight: 600; line-height: 1; }
.fctld-stat-k { font-size: 12px; color: var(--ink-3); margin-top: 7px; }

.fctld-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 432px; gap: var(--s-6); }
.fctld-main { min-height: 0; overflow-y: auto; padding-right: 4px; }
.fctld-side { min-height: 0; }

.fctld-panel { overflow: hidden; }
.fctld-panel.pad { padding: 0; }
.fctld-panel .phead { display: flex; align-items: center; justify-content: space-between; }
.fctld-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--hairline-2); background: var(--panel-2); }
.fctld-count.gold { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold-bright) 40%, transparent); background: color-mix(in srgb, var(--gold-bright) 12%, transparent); }

/* table */
.fctld-table { width: 100%; border-collapse: collapse; }
.fctld-table thead th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); font-weight: 400; padding: 11px 16px; border-bottom: 1px solid var(--hairline); }
.fctld-table th.r, .fctld-table td.r { text-align: right; }
.fctld-tr { cursor: pointer; transition: background var(--dur-fast); }
.fctld-tr:hover { background: var(--panel-2); }
.fctld-tr.on { background: var(--active-dim); }
.fctld-tr td { padding: 11px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.fctld-tr:last-child td { border-bottom: none; }
.fctld-tcell { display: flex; flex-direction: column; gap: 3px; }
.fctld-tid { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.fctld-ttitle { font-size: 13px; font-weight: 600; color: var(--ink); }
.fctld-ttype { font-family: var(--font-mono); font-size: 10.5px; color: var(--violet-ink); }
.fctld-tupd { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.fctld-empty { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 48px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.fctld-empty .glyph { color: var(--state-clear); }

/* detail wrap (reuses .fctl-detail inside) */
.fctld-detailwrap { height: 100%; padding: 0; display: flex; }
.fctld-detailwrap .fctl-detail { flex: 1; min-width: 0; }

/* permission inbox */
.fctld-inbox { height: 100%; overflow-y: auto; }
.fctld-inbox-body { padding: var(--s-5) var(--s-6) var(--s-6); }
.fctld-inbox-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-bottom: 14px; }
.fctld-inbox-body .fctl-perm { padding: 14px; border: 1px solid var(--hairline-2); border-radius: 12px; background: var(--panel-2); margin-bottom: 12px; }
.fctld-inbox-body .fctl-perm:last-child { margin-bottom: 0; }

/* placeholder */
.fctld-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 32px; }
.fctld-ph-ring { width: 60px; height: 60px; border-radius: 99px; border: 1px dashed var(--hairline-3); display: grid; place-items: center; color: var(--ink-4); }
.fctld-placeholder b { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.fctld-placeholder em { font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); max-width: 32ch; }

/* modals */
.fctld-modal-root { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fctld-modal-bd { position: absolute; inset: 0; background: rgba(5,4,10,0.66); backdrop-filter: blur(4px); animation: fctlFade .2s var(--ease-out); }
.fctld-modal { position: relative; width: 100%; max-width: 540px; max-height: 86vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--hairline-3); border-radius: var(--r-lg); box-shadow: 0 40px 100px rgba(0,0,0,.6), var(--glow-violet); animation: fctlModalIn .26s var(--ease-out); overflow: hidden; }
.fctld-modal.narrow { max-width: 460px; padding: 22px; }
@keyframes fctlModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.fctld-modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hairline-2); background: var(--panel-2); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.fctld-modal-x:hover { color: var(--ink); border-color: var(--hairline-3); }
.fctld-modal-body { overflow-y: auto; }
.fctld-confirm { position: relative; width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--hairline-3); border-radius: var(--r-lg); padding: 24px 22px; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,.6); animation: fctlModalIn .26s var(--ease-out); }
.fctld-confirm .fctl-sheet-ic { margin: 0 auto 13px; }
.fctld-toast { position: fixed; bottom: 32px; left: 50%; }

/* desktop responsive */
@media (max-width: 1080px) {
  .fctld-split { grid-template-columns: 1fr; }
  .fctld-side { min-height: 420px; }
  .fctld-stats { grid-template-columns: repeat(3, 1fr); }
  .fctld { height: auto; }
}
@media (max-width: 640px) {
  .fctld-stats { grid-template-columns: repeat(2, 1fr); }
  .fctld-bar { flex-wrap: wrap; }
  .fctl-perm-act { flex-wrap: wrap; }
}