/* ============================================================
   TVZONE / Tabox activation portal — design system
   Palette derives from the brand marks: tabox brown #302215 +
   orange #F2892F, TVZone pink #E40A66. Warm, calm, high-contrast;
   the monospace code fields are the signature (codes are the product).
   Class names are kept stable — the pages and scripts depend on them.
   ============================================================ */

:root{
	--ink:      #2b1f14;   /* primary text / primary button (tabox brown) */
	--ink-2:    #5c5145;   /* secondary text */
	--muted:    #8c8175;   /* hints, meta */
	--accent:   #f2892f;   /* tabox orange — accents, active field, top bar */
	--accent-ink:#c25e12;  /* darkened orange — links / focus (a11y-safe on white) */
	--bg:       #f4efe8;   /* warm page */
	--card:     #ffffff;
	--field:    #f6f1ea;   /* input fill */
	--field-on: #ffffff;   /* input fill when focused */
	--line:     #ece3d7;   /* hairlines */
	--ok:       #1e8e4e;
	--danger:   #c0392b;

	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;

	--mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

*{ box-sizing: border-box; }

body{
	margin: 0;
	padding: 24px 12px;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

a{
	color: var(--accent-ink);
	text-decoration: none;
	font-weight: 600;
}
a:hover{ text-decoration: underline; }

/* ---- Card ---- */
.container{
	position: relative;
	width: min(420px, 100%);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: 0 12px 32px rgba(43, 31, 20, 0.10);
	padding: var(--s4) var(--s6) var(--s6);
	overflow: hidden;
	text-align: left;
}
.container::before{        /* one brand flourish: a thin orange top edge */
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--accent);
}

/* ---- Header / logos ---- */
#header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s8);
	clear: both;
}
#header .tvzonelogo{ width: 52px; height: 45px; }
#header .tvzonelogo img{ width: 100%; height: 100%; display: block; }
#header .haboologo{ display: flex; align-items: center; gap: var(--s2); }
#header .haboologo .poweredby{
	color: var(--ink);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.15;
	text-align: right;
}
#header .haboologo img{ height: 30px; width: auto; display: block; }

/* ---- Form layout (no floats: clean vertical stack) ---- */
#form{ width: 100%; }

.inputsection{ margin-bottom: var(--s6); }
.inputsection:last-of-type{ margin-bottom: 0; }

.headline{
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	margin-bottom: var(--s2);
	color: var(--ink);
}
.headline-confirm{
	font-weight: 700;
	font-size: 15px;
	margin-bottom: var(--s2);
	color: var(--danger);
}

/* Setup guidance block */
.instructions{
	color: var(--ink-2);
	line-height: 1.5;
	font-weight: 500;
	font-size: 13px;
	margin-bottom: var(--s3);
}
.instructions b{ color: var(--ink); font-weight: 700; }

/* Small helper line above a field */
.headline-small{
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: var(--s2);
}

/* ---- Fields ---- */
.entersection{ position: relative; }

.input{
	width: 100%;
	height: 52px;
	padding: 0 var(--s4);
	background: var(--field);                    /* subtle fill so a borderless field still reads on the white card */
	border: 1.5px solid transparent;             /* reserved so focus adds no layout shift */
	border-radius: var(--r-md);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color: var(--muted); font-weight: 500; }
.input:hover{ background: #efe6d8; }             /* minimal bg change on hover */
.input:focus{
	outline: none;
	background: #fff;
	border-color: var(--accent);                 /* border only when active */
	box-shadow: 0 0 0 3px rgba(242, 137, 47, 0.18);
}

/* Signature: code / PIN fields read as codes — big, mono, spaced */
.codebox{
	font-family: var(--mono);
	font-size: 20px;
	letter-spacing: 0.14em;
	text-align: center;
	height: 58px;
}

textarea.input{
	height: auto;
	min-height: 96px;
	padding: var(--s3) var(--s4);
	line-height: 1.5;
	resize: vertical;
	font-weight: 500;
}

/* Validation icon inside the field */
.indicator{
	position: absolute;
	top: 50%;
	right: var(--s3);
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	pointer-events: none;
}
.indicator .fail,
.indicator .success{
	width: 22px;
	height: 22px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.indicator .fail{ background-image: url(images/fail.png); }
.indicator .success{ background-image: url(images/success.png); }
.hidden{ display: none; }

/* ---- Buttons: full width, one clear primary per view ---- */
.button{
	display: block;
	width: 100%;
	height: 52px;
	margin-top: var(--s4);
	padding: 0 var(--s4);
	background: var(--ink);
	color: #fff;
	border: none;
	border-radius: var(--r-md);
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
.button:hover{ background: #1c130a; }
.button:active{ transform: translateY(1px); }
.button:disabled{
	background: var(--line);
	color: var(--muted);
	cursor: not-allowed;
}
.button:focus-visible{
	outline: none;
	box-shadow: 0 0 0 3px rgba(242, 137, 47, 0.45);
}

/* Inline text links under a form (I have username / activation code) */
.altlink{
	display: block;
	text-align: center;
	margin-top: var(--s4);
	font-size: 14px;
}

.finalconfirm{ margin-top: var(--s2); }

/* ---- Messages ---- */
#message{ margin-top: var(--s4); text-align: center; min-height: 20px; }
.success{
	font-size: 14px;
	color: var(--ok);
	font-weight: 600;
}

/* ---- Language picker (own row, top-right) ---- */
.langselect{
	display: block;
	width: auto;
	margin: 0 0 var(--s2) auto;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 12px;
	cursor: pointer;
}
.langselect:focus-visible{
	outline: none;
	box-shadow: 0 0 0 3px rgba(242, 137, 47, 0.35);
}

/* ============================================================
   Card management portal (manage.html)
   ============================================================ */
.mgr-view{ width: 100%; }
.mgr-block{ margin-top: var(--s6); }
.mgr-msg{ margin-top: var(--s4); font-size: 13px; text-align: center; min-height: 18px; }
.mgr-hint{ font-size: 13px; color: var(--muted); margin: var(--s1) 0 var(--s3); line-height: 1.5; }

.mgr-summary{
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s2) var(--s4);
	margin-bottom: var(--s6);
}
.mgr-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s4);
	padding: var(--s3) 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.mgr-row:last-child{ border-bottom: none; }
.mgr-row span{ color: var(--muted); }
.mgr-row b{ color: var(--ink); font-weight: 700; text-align: right; word-break: break-word; }

.mgr-section-title{
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin-bottom: var(--s3);
}

.mgr-devices{ margin-bottom: var(--s2); }
.mgr-empty{
	font-size: 14px;
	color: var(--muted);
	padding: var(--s6) 0;
	text-align: center;
}
.mgr-device{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3) 0;
	border-bottom: 1px solid var(--line);
}
.mgr-device:last-child{ border-bottom: none; }
.mgr-device-name{ font-size: 14px; font-weight: 700; color: var(--ink); }
.mgr-device-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Pill button inside a device row: .mgr-remove (destructive), .mgr-action (neutral) */
.mgr-remove, .mgr-action{
	flex: 0 0 auto;
	width: auto;
	height: 38px;
	margin: 0;
	padding: 0 var(--s4);
	background: #fff;
	color: var(--danger);
	border: 1.5px solid var(--danger);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.mgr-remove:hover{ background: var(--danger); color: #fff; }
.mgr-action{ color: var(--ink); border-color: var(--ink); }
.mgr-action:hover{ background: var(--ink); color: #fff; }
.mgr-device-actions{ display: flex; gap: var(--s2); flex: 0 0 auto; }

/* ---- Motion / a11y ---- */
@media (prefers-reduced-motion: reduce){
	*{ transition: none !important; }
}

/* ---- Result banners ---- */
#message:empty{ display: none; }
.banner{
	display: flex;
	align-items: center;
	gap: var(--s3);
	text-align: left;
	padding: var(--s3) var(--s4);
	border-radius: var(--r-md);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.banner-ic{
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: 13px;
}
.banner-ok{ background: rgba(30,142,78,0.10); color: #166b3b; }
.banner-ok .banner-ic{ background: var(--ok); }
.banner-err{ background: rgba(192,57,43,0.10); color: #9c2c20; }
.banner-err .banner-ic{ background: var(--danger); }
.banner-info{ background: var(--field); color: var(--ink-2); }
.banner-info .banner-ic{ background: var(--muted); }

.mgr-help{ text-align: center; font-size: 14px; color: var(--muted); }
.mgr-help a{ margin-left: 6px; }

/* Cloudflare Turnstile widget (index.html above OK, manage.html above LOGIN) */
.cf-turnstile{ display: flex; justify-content: center; margin: 0 0 12px; }