/* FATALnet Portal — front-end styles (login + design center). */

:root {
	--fn-bg: #0B0B0D;
	--fn-panel: #141417;
	--fn-panel-2: #0E0E10;
	--fn-line: #26262B;
	--fn-line-soft: #1E1E22;
	--fn-red: #D31A1A;
	--fn-red-bright: #E22222;
	--fn-red-deep: #9E1212;
	--fn-red-tint: #2E1416;
	--fn-text: #F2F2F0;
	--fn-dim: #8A8F98;
	--fn-mute: #5A5F68;
	--fn-silver: #C9CDD4;
	--fn-green: #1D7A55;
	--fn-green-bright: #239268;
	--fn-amber: #C9871F;
	--fn-blue: #3D7DBE;
	--fn-radius: 12px;
	--fn-radius-sm: 8px;
	--fn-display: "Chakra Petch", system-ui, sans-serif;
	--fn-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
.fn-body {
	margin: 0;
	font-family: var(--fn-body);
	background-color: #060608;
	background-image: radial-gradient(1100px 620px at 50% -12%, #121218 0%, rgba(6, 6, 8, 0) 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--fn-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}
.fn-body img { max-width: 100%; display: block; }
.fn-body a { color: var(--fn-red-bright); text-decoration: none; }
.fn-body a:hover { color: var(--fn-red); }
.fn-body :focus-visible { outline: 2px solid var(--fn-red); outline-offset: 2px; }

/* Wordmark */
.fn-wordmark { font-family: var(--fn-display); font-weight: 700; font-size: 19px; letter-spacing: 0.3px; line-height: 1; }
.fn-wm-red { color: var(--fn-red-bright); }
.fn-wm-silver { color: var(--fn-silver); font-style: italic; }

/* Icons (simple line glyphs via masks-free inline SVG in markup or pseudo) */
.fn-i-check::before { content: "\2713"; }
.fn-i-plus::before { content: "\002B"; margin-right: 2px; }
.fn-i-ext::before { content: "\2197"; margin-right: 2px; }
.fn-i-warn::before { content: "\26A0"; margin-right: 8px; }
.fn-i-user::before { content: "\1F464"; }
.fn-i-send::before { content: "\27A4"; }

/* Buttons */
.fn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--fn-body); font-weight: 500; font-size: 14px;
	padding: 11px 20px; border-radius: var(--fn-radius-sm); border: 1px solid transparent;
	cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .12s ease; text-decoration: none;
}
.fn-btn:active { transform: translateY(1px); }
.fn-btn-sm { padding: 8px 14px; font-size: 13px; }
.fn-btn-block { width: 100%; padding: 13px 20px; font-size: 15px; }
.fn-body .fn-btn-red { background: var(--fn-red); color: #fff; }
.fn-body .fn-btn-red:hover { background: var(--fn-red-deep); color: #fff; }
.fn-body .fn-btn-green { background: var(--fn-green); color: #fff; }
.fn-body .fn-btn-green:hover { background: var(--fn-green-bright); color: #fff; }
.fn-body .fn-btn-ghost { background: transparent; color: var(--fn-silver); border-color: var(--fn-line); }
.fn-body .fn-btn-ghost:hover { border-color: var(--fn-mute); color: var(--fn-text); }
.fn-body .fn-btn.is-disabled { opacity: .5; pointer-events: none; }

/* Soft red glow behind the badge on the login screen */
.fn-circuit {
	position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(circle at 50% 23%, rgba(211, 26, 26, 0.16) 0%, transparent 46%);
}

/* ============================ LOGIN ============================ */
.fn-login-wrap {
	position: relative; z-index: 1;
	min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 48px 20px;
}
.fn-login-badge { margin-bottom: 4px; }
.fn-badge { display: block; height: auto; filter: drop-shadow(0 10px 34px rgba(211, 26, 26, 0.28)); }
.fn-badge-mini-img { display: block; border-radius: 50%; flex: none; }

.fn-card {
	background: var(--fn-panel); border: 1px solid var(--fn-line); border-radius: 14px;
}
.fn-login-card { width: 100%; max-width: 384px; padding: 30px 30px 26px; margin-top: 26px; }
.fn-card-title { font-family: var(--fn-body); font-size: 20px; font-weight: 600; margin: 0 0 3px; color: var(--fn-text); }
.fn-card-sub { font-size: 14px; color: var(--fn-dim); margin: 0 0 20px; }

.fn-alert {
	display: flex; align-items: center; background: var(--fn-red-tint); border: 1px solid #4A2023;
	color: #F5B5AC; border-radius: var(--fn-radius-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 18px;
}

.fn-form { display: block; }
.fn-label {
	display: block; font-family: var(--fn-display); font-weight: 500; font-size: 12px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--fn-silver); margin: 0 0 7px;
}
.fn-input-wrap { position: relative; margin-bottom: 16px; }
.fn-input-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fn-red); pointer-events: none; }
.fn-input {
	width: 100%; background: var(--fn-panel-2); border: 1px solid var(--fn-line);
	border-radius: var(--fn-radius-sm); color: var(--fn-text); font: inherit; font-size: 15px;
	padding: 12px 14px 12px 40px;
}
.fn-input::placeholder { color: var(--fn-mute); }
.fn-input:focus { outline: none; border-color: var(--fn-red); box-shadow: 0 0 0 3px rgba(211,26,26,.16); }
.fn-input:-webkit-autofill,
.fn-input:-webkit-autofill:hover,
.fn-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--fn-text);
	-webkit-box-shadow: 0 0 0 1000px var(--fn-panel-2) inset;
	box-shadow: 0 0 0 1000px var(--fn-panel-2) inset;
	caret-color: var(--fn-text);
	border: 1px solid var(--fn-line);
	transition: background-color 9999s ease 0s;
}
.fn-reveal {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0;
	color: var(--fn-mute); cursor: pointer; padding: 6px; display: inline-flex;
}
.fn-reveal svg { width: 18px; height: 18px; }
.fn-reveal:hover { color: var(--fn-silver); }
.fn-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fn-dim); margin: 2px 0 20px; }
.fn-remember input { accent-color: var(--fn-red); }
.fn-card-foot { text-align: center; font-size: 13px; color: var(--fn-mute); margin: 16px 0 0; }
.fn-fineprint { text-align: center; font-size: 11.5px; color: #4A4E56; margin-top: 24px; letter-spacing: .02em; }

/* ============================ APP SHELL ============================ */
.fn-topbar { border-bottom: 1px solid var(--fn-line-soft); background: #0C0C0F; position: sticky; top: 0; z-index: 20; }
.fn-topbar-in { max-width: 940px; margin: 0 auto; padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fn-brand { display: flex; align-items: center; gap: 10px; }
.fn-badge-mini { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #131315; border: 2.5px solid var(--fn-red); flex: none; }
.fn-brand-tag { font-size: 12px; color: var(--fn-mute); margin-left: 4px; }
.fn-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fn-dim); }
.fn-avatar, .fn-msg-av { width: 28px; height: 28px; border-radius: 50%; background: var(--fn-line); color: var(--fn-text); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex: none; }
.fn-user-name { color: var(--fn-silver); }
.fn-body .fn-logout { color: var(--fn-mute); font-size: 13px; }
.fn-logout:hover { color: var(--fn-red); }

.fn-main { position: relative; z-index: 1; }
.fn-main-in { max-width: 940px; margin: 0 auto; padding: 34px 22px 60px; }
.fn-h1 { font-family: var(--fn-body); font-size: 26px; font-weight: 600; margin: 0 0 4px; color: var(--fn-text); }
.fn-sub { color: var(--fn-dim); font-size: 15px; margin: 0 0 22px; }

.fn-toast { border-radius: var(--fn-radius-sm); padding: 13px 18px; font-size: 14px; margin-bottom: 22px; }
.fn-toast.is-ok { background: #10301F; border: 1px solid #1C5238; color: #7BD4A8; }
.fn-toast.is-err { background: var(--fn-red-tint); border: 1px solid #4A2023; color: #F5B5AC; }

/* Status pills */
.fn-status { font-family: var(--fn-display); font-weight: 500; font-size: 11px; letter-spacing: .04em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.fn-status.is-red { background: #3A1414; color: #F09595; }
.fn-status.is-amber { background: #3A2A12; color: #F0C177; }
.fn-status.is-blue { background: #12263A; color: #85B7EB; }
.fn-status.is-green { background: #12301F; color: #7BD4A8; }

/* Project card */
.fn-project { background: var(--fn-panel); border: 1px solid var(--fn-line); border-radius: 16px; padding: 20px; margin-bottom: 22px; }
.fn-project-head { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 20px; align-items: center; }
.fn-thumb { border-radius: 10px; aspect-ratio: 4/3; background: #13294B; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.fn-thumb-mark { font-family: var(--fn-display); font-weight: 700; font-size: 34px; color: var(--fn-silver); }
.fn-project-meta { min-width: 0; }
.fn-project-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fn-project-title h2 { font-family: var(--fn-body); font-size: 19px; font-weight: 600; margin: 0; color: var(--fn-text); }
.fn-project-note { color: var(--fn-dim); font-size: 14px; margin: 7px 0 0; }
.fn-project-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Blocks */
.fn-block { border-top: 1px solid var(--fn-line-soft); margin-top: 22px; padding-top: 22px; }
.fn-block-title { font-family: var(--fn-body); font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--fn-text); }
.fn-block-sub { color: var(--fn-dim); font-size: 13.5px; margin: 0 0 16px; }

/* Logo wall */
.fn-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fn-logo-opt { position: relative; display: flex; flex-direction: column; cursor: pointer; border: 2px solid var(--fn-line); border-radius: 12px; overflow: hidden; background: #fff; transition: border-color .18s ease; }
.fn-logo-opt:hover { border-color: var(--fn-mute); }
.fn-logo-opt.is-picked { border-color: var(--fn-red); }
.fn-logo-opt input { position: absolute; opacity: 0; }
.fn-logo-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--fn-red); color: #fff; display: none; align-items: center; justify-content: center; font-size: 12px; }
.fn-logo-opt.is-picked .fn-logo-check { display: flex; }
.fn-logo-img { padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 96px; background: #fff; }
.fn-logo-img img { max-height: 90px; width: auto; }
.fn-logo-label { font-size: 12px; color: #5F5E5A; background: #F4F1EA; padding: 8px 10px; text-align: center; }
.fn-logo-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fn-change { margin-top: 14px; }
.fn-change[hidden] { display: none; }
.fn-textarea { width: 100%; background: var(--fn-panel-2); border: 1px solid var(--fn-line); border-radius: var(--fn-radius-sm); color: var(--fn-text); font: inherit; font-size: 14.5px; padding: 12px 14px; resize: vertical; }
.fn-textarea:focus { outline: none; border-color: var(--fn-red); box-shadow: 0 0 0 3px rgba(211,26,26,.16); }
.fn-change .fn-btn { margin-top: 12px; }

/* Thread */
.fn-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.fn-thread-empty { color: var(--fn-mute); font-size: 14px; margin: 0; }
.fn-msg { display: flex; gap: 10px; }
.fn-msg.is-studio .fn-msg-av { background: var(--fn-red-tint); color: #F09595; }
.fn-msg-body { min-width: 0; }
.fn-msg-text { margin: 0; font-size: 14.5px; color: var(--fn-silver); }
.fn-msg-meta { margin: 3px 0 0; font-size: 11.5px; color: var(--fn-mute); }
.fn-msg-tag { background: #3A2A12; color: #F0C177; font-size: 10.5px; padding: 1px 7px; border-radius: 3px; margin-left: 6px; }
.fn-thread-input { margin-bottom: 0; }
.fn-thread-input .fn-input { padding-left: 14px; padding-right: 48px; }
.fn-send { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: var(--fn-red); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fn-send:hover { background: var(--fn-red-deep); }

/* Empty / studio */
.fn-empty { padding: 34px 30px; text-align: center; }
.fn-empty h2 { font-family: var(--fn-body); font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--fn-text); }
.fn-empty p { color: var(--fn-dim); margin: 0 auto 18px; max-width: 420px; }
.fn-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.fn-studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.fn-studio-card { background: var(--fn-panel); border: 1px solid var(--fn-line); border-radius: 14px; padding: 14px; display: flex; gap: 14px; }
.fn-thumb-sm { width: 92px; flex: none; border-radius: 8px; }
.fn-thumb-sm .fn-thumb-mark { font-size: 24px; }
.fn-studio-card-body { min-width: 0; flex: 1; }
.fn-studio-line { font-size: 13px; color: var(--fn-dim); margin: 8px 0 12px; display: flex; align-items: center; gap: 6px; }
.fn-warn, .fn-msg .fn-warn { color: #F0997B; }

@media (max-width: 620px) {
	.fn-project-head { grid-template-columns: 1fr; }
	.fn-thumb { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ===================== DESIGN CENTER v2 ===================== */
.fn-intro { margin-bottom: 26px; }

.fn-project { background: var(--fn-panel); border: 1px solid var(--fn-line); border-radius: 18px; padding: 26px; margin-bottom: 26px; }

/* Project hero */
.fn-phero { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 28px; align-items: center; }
.fn-phero-text { min-width: 0; }
.fn-phero-titlerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.fn-phero-title { font-family: var(--fn-body); font-size: 30px; font-weight: 600; margin: 0; color: var(--fn-text); letter-spacing: -0.01em; }
.fn-phero-note { color: var(--fn-dim); font-size: 15px; margin: 12px 0 0; }
.fn-phero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.fn-phero-visual { border-radius: 14px; aspect-ratio: 16 / 11; background: #101014; background-size: cover; background-position: center; border: 1px solid var(--fn-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fn-phero-visual .fn-thumb-mark { font-family: var(--fn-display); font-weight: 700; font-size: 60px; color: var(--fn-silver); opacity: .85; }
.fn-btn-lg { padding: 15px 26px; font-size: 16px; }

/* Progress journey */
.fn-journey-wrap { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--fn-line-soft); }
.fn-journey { list-style: none; display: flex; margin: 0; padding: 0; }
.fn-step { flex: 1; position: relative; text-align: center; padding-top: 36px; }
.fn-step-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fn-display); font-weight: 600; font-size: 13px; z-index: 1; }
.fn-step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--fn-line); }
.fn-step:first-child::before { display: none; }
.fn-step-label { font-size: 12px; color: var(--fn-mute); line-height: 1.35; display: inline-block; padding: 0 4px; }
.fn-step.is-upcoming .fn-step-dot { background: #17171B; color: var(--fn-mute); border: 1px solid var(--fn-line); }
.fn-step.is-current .fn-step-dot { background: var(--fn-red); color: #fff; box-shadow: 0 0 0 4px rgba(211, 26, 26, 0.22); }
.fn-step.is-current .fn-step-label { color: var(--fn-text); font-weight: 500; }
.fn-step.is-done .fn-step-dot { background: var(--fn-red); color: #fff; }
.fn-step.is-done .fn-step-label { color: var(--fn-silver); }
.fn-step.is-done::before, .fn-step.is-current::before { background: var(--fn-red); }
.fn-nextstep { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 14.5px; color: var(--fn-silver); background: #101014; border: 1px solid var(--fn-line-soft); border-radius: var(--fn-radius-sm); padding: 13px 16px; }
.fn-nextstep-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fn-red); flex: none; box-shadow: 0 0 0 4px rgba(211, 26, 26, 0.18); }

/* Block head + approved badge */
.fn-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fn-approved-badge { display: inline-flex; align-items: center; gap: 6px; background: #12301F; color: #7BD4A8; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px; }

@media (max-width: 720px) {
	.fn-phero { grid-template-columns: 1fr; gap: 20px; }
	.fn-phero-visual { order: -1; max-height: 200px; }
	.fn-phero-title { font-size: 26px; }
	.fn-step-label { font-size: 11px; }
}