/* ─── Design tokens ─────────────────────────────────────────── */
:root{
	--text:#0f172a;
	--muted:#64748b;
	--bg:#f0f4ff;
	--card:#ffffff;
	--border:rgba(15,23,42,.10);
	--shadow:0 4px 24px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.05);
	--shadow-lg:0 12px 40px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
	--shadow-card:0 2px 12px rgba(37,99,235,.08), 0 1px 3px rgba(15,23,42,.04);

	--primary:#2563eb;
	--primary-dark:#1d4ed8;
	--primary2:#16a34a;
	--primary2-light:#22c55e;
	--primaryText:#ffffff;

	--danger:#dc2626;
	--dangerText:#ffffff;
	--warning:#f59e0b;
	--info:#0ea5e9;

	--surface:rgba(255,255,255,.80);
	--surface2:rgba(248,250,255,.90);
	--focus:rgba(37,99,235,.30);

	--successBg:#f0fdf4;
	--successBorder:rgba(22,163,74,.28);
	--errorBg:#fff1f2;
	--errorBorder:rgba(220,38,38,.28);
	--warningBg:#fffbeb;
	--warningBorder:rgba(245,158,11,.28);

	--toneBlueRgb:37,99,235;
	--toneGreenRgb:22,163,74;
	--toneOrangeRgb:234,88,12;
	--tonePurpleRgb:124,58,237;
	--toneRedRgb:220,38,38;
	--toneBrownRgb:92,38,15;

	--radius-sm:8px;
	--radius:14px;
	--radius-lg:20px;
	--radius-xl:28px;

	--transition:all .18s cubic-bezier(.4,0,.2,1);
	--transition-fast:all .12s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after{box-sizing:border-box}

html{scroll-behavior:smooth}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(15,23,42,.04)}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,.28);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,.50)}

::selection{background:rgba(37,99,235,.15);color:var(--text)}

body{
	margin:0;
	font-family:'Sarabun','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Helvetica,Arial,sans-serif;
	font-size:15px;
	line-height:1.65;
	color:var(--text);
	background:
		radial-gradient(ellipse 1400px 700px at 5% -5%, rgba(37,99,235,.13), transparent 55%),
		radial-gradient(ellipse 1000px 600px at 95% 0%, rgba(22,163,74,.11), transparent 50%),
		radial-gradient(ellipse 800px 500px at 50% 100%, rgba(124,58,237,.06), transparent 60%),
		var(--bg);
	min-height:100vh;
}

/* ─── Page entrance animation ───────────────────────────────── */
@keyframes fadeUp{
	from{opacity:0;transform:translateY(14px)}
	to  {opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
	from{opacity:0}
	to  {opacity:1}
}
@keyframes scaleIn{
	from{opacity:0;transform:scale(.96)}
	to  {opacity:1;transform:scale(1)}
}

main.container > *{
	animation:fadeUp .38s cubic-bezier(.4,0,.2,1) both;
}
main.container > *:nth-child(2){animation-delay:.05s}
main.container > *:nth-child(3){animation-delay:.10s}
main.container > *:nth-child(4){animation-delay:.14s}

/* ─── Layout ─────────────────────────────────────────────────── */
.container{max-width:1060px;margin:0 auto;padding:18px}
main.container{padding-top:16px}

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar{
	position:sticky;
	top:0;
	z-index:40;
	backdrop-filter:saturate(180%) blur(16px);
	-webkit-backdrop-filter:saturate(180%) blur(16px);
	background:linear-gradient(135deg, rgba(37,99,235,.09) 0%, rgba(22,163,74,.07) 100%), rgba(255,255,255,.82);
	border-bottom:1px solid var(--border);
	box-shadow:0 1px 16px rgba(37,99,235,.07);
}
.topbar .container{padding-top:10px;padding-bottom:10px}
.topbar__inner{display:flex;gap:14px;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:14px}
.brand__logo{
	width:46px;height:46px;object-fit:contain;flex:0 0 auto;
	filter:drop-shadow(0 2px 6px rgba(37,99,235,.20));
	transition:var(--transition);
}
.brand__logo:hover{transform:scale(1.05)}
.brand__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand__title{
	font-weight:800;letter-spacing:.3px;font-size:15px;line-height:1.15;
	background:linear-gradient(90deg, var(--primary), var(--primary2));
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.brand__sub{font-size:10.5px;color:var(--muted);letter-spacing:.1px}
.brand__user{
	font-size:12.5px;font-weight:700;color:var(--muted);
	padding:6px 12px;border-radius:var(--radius-sm);
	background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.12);
}

.topbar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.topbar__meta{font-size:12px;color:var(--muted);font-weight:800}
.topbar .btn{padding:8px 14px;font-size:13px}

/* ─── Nav ────────────────────────────────────────────────────── */
.nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nav__group{
	display:flex;gap:6px;align-items:center;
	padding:5px 10px;border:1px solid var(--border);
	border-radius:999px;background:rgba(255,255,255,.72);
	backdrop-filter:blur(8px);
}
.nav__label{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.2px}
.nav__link{
	color:var(--muted);text-decoration:none;padding:6px 12px;
	border-radius:999px;font-size:13px;font-weight:600;
	transition:var(--transition-fast);
}
.nav__link:hover{background:rgba(37,99,235,.10);color:var(--primary)}
.nav__link--active{
	background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(22,163,74,.10));
	color:var(--primary);border:1px solid rgba(37,99,235,.20);font-weight:700;
}
.nav__form{margin:0}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer{
	margin-top:32px;
	border-top:1px solid var(--border);
	background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(240,244,255,.9));
	backdrop-filter:blur(12px);
}
.footer .container{
	padding-top:20px;padding-bottom:20px;
	display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.footer small{color:var(--muted);font-size:12px;line-height:1.6}

/* ─── Banner ─────────────────────────────────────────────────── */
.banner-wrap{padding-top:14px}
.banner{
	border:1px solid var(--border);
	border-radius:var(--radius-xl);
	overflow:hidden;
	box-shadow:var(--shadow-lg);
	background:rgba(255,255,255,.7);
	position:relative;
}
.banner::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(180deg, transparent 60%, rgba(15,23,42,.18));
	pointer-events:none;
}
.banner__img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .5s ease}
.banner:hover .banner__img{transform:scale(1.015)}

@media (max-width:720px){.banner__img{height:160px}}

/* ─── Cards ──────────────────────────────────────────────────── */
.card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	padding:22px;
	box-shadow:var(--shadow-card);
	transition:box-shadow .2s ease;
}
.card:focus-within{box-shadow:var(--shadow)}
.card--narrow{max-width:520px;margin-left:auto;margin-right:auto}
.card--spaced{margin-top:14px}

/* ─── Typography ─────────────────────────────────────────────── */
.h1{margin:0 0 6px 0;font-size:22px;font-weight:800;letter-spacing:.2px;line-height:1.3}
.h2{margin:0 0 10px 0;font-size:17px;font-weight:800;letter-spacing:.2px;line-height:1.3}
.muted{color:var(--muted);margin-top:0;font-size:14px}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.page-head__title{min-width:0}

.page-head--pos{flex-direction:column;align-items:stretch}
.page-head--pos .page-head__title{text-align:center}

/* ─── Stat badges ────────────────────────────────────────────── */
.badge-stack{display:flex;gap:16px;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%}
.stat-block{display:flex;flex-direction:column;align-items:center;gap:8px}
.stat-block__label{font-size:13px;font-weight:700;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.06em}
.stat-badge{
	background:var(--primary2);
	color:var(--primaryText);
	border-radius:var(--radius-lg);
	padding:10px 22px;
	text-align:center;
	box-shadow:0 4px 20px rgba(22,163,74,.32), 0 1px 4px rgba(15,23,42,.08);
	border:1px solid rgba(255,255,255,.20);
	min-width:260px;
	transition:var(--transition);
	position:relative;overflow:hidden;
}
.stat-badge::before{
	content:'';position:absolute;inset:0;
	background:linear-gradient(135deg, rgba(255,255,255,.20) 0%, transparent 60%);
	pointer-events:none;
}
.stat-badge__amount{font-size:72px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat-badge__amount--sm{font-size:72px}

.stat-badge--green{
	background:linear-gradient(135deg, #16a34a, #15803d);
	box-shadow:0 4px 20px rgba(22,163,74,.36), 0 1px 4px rgba(15,23,42,.08);
}
.stat-badge--blue{
	background:linear-gradient(135deg, #2563eb, #1d4ed8);
	box-shadow:0 4px 20px rgba(37,99,235,.36), 0 1px 4px rgba(15,23,42,.08);
}
.stat-badge--red{
	background:linear-gradient(135deg, #dc2626, #b91c1c);
	box-shadow:0 4px 20px rgba(220,38,38,.32), 0 1px 4px rgba(15,23,42,.08);
}

@media (max-width:720px){
	.badge-stack{width:100%;justify-content:stretch}
	.stat-block{width:100%}
	.stat-badge{width:100%;min-width:0}
	.stat-badge__amount{font-size:64px}
	.stat-badge__amount--sm{font-size:64px}
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn{
	display:inline-flex;align-items:center;gap:7px;
	background:linear-gradient(135deg, var(--primary) 0%, #1d51d4 100%);
	color:var(--primaryText);
	border:none;border-radius:var(--radius);
	padding:10px 18px;
	text-decoration:none;cursor:pointer;
	font-weight:700;font-size:14px;letter-spacing:.2px;
	transition:var(--transition);
	box-shadow:0 2px 10px rgba(37,99,235,.28);
	white-space:nowrap;
	position:relative;overflow:hidden;
	will-change:transform;
}
.btn::before{
	content:'';position:absolute;inset:0;
	background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
	pointer-events:none;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px rgba(37,99,235,.38)}
.btn:active{transform:translateY(0) scale(1.00);box-shadow:0 1px 6px rgba(37,99,235,.20)}
.btn:focus{outline:3px solid var(--focus);outline-offset:3px}

.btn--primary{background:linear-gradient(135deg, var(--primary), #1d51d4)}
.btn--secondary{
	background:rgba(255,255,255,.92);color:var(--text);
	border:1px solid var(--border);
	box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.btn--secondary::before{display:none}
.btn--secondary:hover{background:#ffffff;box-shadow:var(--shadow)}

.btn--icon{
	display:inline-flex;align-items:center;justify-content:center;
	padding:10px 12px;
}
.btn--icon svg{display:block}

.btn--disabled{opacity:.52;pointer-events:none;filter:saturate(.6)}
.btn--danger{
	background:linear-gradient(135deg, var(--danger), #b91c1c);
	box-shadow:0 2px 10px rgba(220,38,38,.28);
}
.btn--danger:hover{box-shadow:0 6px 20px rgba(220,38,38,.38)}

.btn--block{width:100%;justify-content:center}
.btn--xl{padding:14px 24px;font-size:17px;border-radius:var(--radius-lg)}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert{
	border:1px solid var(--border);padding:12px 16px;
	border-radius:var(--radius);margin:10px 0;
	font-weight:600;font-size:14px;
	display:flex;align-items:center;gap:10px;
	animation:fadeIn .22s ease both;
}
.alert--success{background:var(--successBg);border-color:var(--successBorder);color:#15803d}
.alert--error{background:var(--errorBg);border-color:var(--errorBorder);color:#dc2626}
.alert--warning{background:var(--warningBg);border-color:var(--warningBorder);color:#d97706}

/* ─── Forms ──────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.label{
	display:flex;flex-direction:column;gap:6px;
	font-weight:700;font-size:13.5px;color:var(--text);
}
.input{
	padding:10px 14px;
	border:1.5px solid var(--border);
	border-radius:var(--radius);
	font-size:14px;
	font-family:inherit;
	background:rgba(255,255,255,.95);
	width:100%;
	transition:var(--transition);
	color:var(--text);
}
.input:hover{border-color:rgba(37,99,235,.30)}
.input:focus{
	outline:none;
	border-color:rgba(37,99,235,.60);
	box-shadow:0 0 0 3px rgba(37,99,235,.12);
	background:#fff;
}
.input::placeholder{color:rgba(100,116,139,.5)}
.input--lg{font-size:20px;padding:14px 16px;height:56px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid > *{min-width:0}
.grid--3-1{grid-template-columns:3fr 1fr}

/* ─── Key-value rows ─────────────────────────────────────────── */
.kv{
	display:flex;justify-content:space-between;gap:12px;
	padding:10px 0;
	border-bottom:1px dashed rgba(15,23,42,.12);
	font-size:14px;
}
.kv span{color:var(--muted)}
.kv strong{font-variant-numeric:tabular-nums}

/* ─── Autocomplete ───────────────────────────────────────────── */
.ac{position:relative}
.ac__list{
	display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);
	background:var(--card);border:1px solid var(--border);
	border-radius:var(--radius);overflow:hidden;z-index:50;
	box-shadow:var(--shadow-lg);
	animation:scaleIn .15s ease both;
}
.ac__item{
	display:block;width:100%;text-align:left;
	padding:10px 14px;border:0;background:transparent;cursor:pointer;
	font-size:14px;font-family:inherit;transition:var(--transition-fast);
}
.ac__item:hover,.ac__item--active{background:rgba(37,99,235,.08);color:var(--primary)}

/* ─── Toggle switch ──────────────────────────────────────────── */
.switch{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;gap:8px}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch__track{
	position:relative;width:48px;height:28px;border-radius:999px;
	border:1.5px solid var(--border);background:rgba(15,23,42,.10);
	transition:var(--transition);
}
.switch__thumb{
	position:absolute;top:2px;left:2px;width:22px;height:22px;
	border-radius:999px;background:#fff;
	border:1px solid rgba(15,23,42,.08);
	box-shadow:0 1px 4px rgba(15,23,42,.18);
	transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.switch input:checked + .switch__track{
	background:linear-gradient(135deg, var(--primary), var(--primary2-light));
	border-color:rgba(37,99,235,.30);
	box-shadow:0 2px 8px rgba(37,99,235,.24);
}
.switch input:checked + .switch__track .switch__thumb{transform:translateX(20px)}
.switch input:focus + .switch__track{outline:3px solid var(--focus);outline-offset:2px}

/* ─── Toolbar ────────────────────────────────────────────────── */
.toolbar{display:flex;gap:10px;align-items:center;margin:12px 0 16px 0;flex-wrap:wrap}

/* ─── Tables ─────────────────────────────────────────────────── */
.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--border)}
.text-right{text-align:right}
.text-left{text-align:left}
.text-center{text-align:center}
.nowrap{white-space:nowrap}
.table-empty{padding:24px;color:var(--muted);text-align:center;font-size:14px}
.qty-input{
	width:96px;
	min-width:96px;
	max-width:120px;
	padding:8px 10px;
	text-align:center;
	font-variant-numeric:tabular-nums;
}
.form--inline{margin:0}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
	font-size:11px;font-weight:700;color:var(--muted);
	text-transform:uppercase;letter-spacing:.08em;
	background:rgba(37,99,235,.04);
	padding:10px 12px;
	border-bottom:1px solid var(--border);
	position:sticky;top:0;z-index:1;
}
th,td{padding:11px 12px;border-bottom:1px solid rgba(15,23,42,.07)}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:rgba(37,99,235,.05)}
tbody tr:last-child td{border-bottom:0}
td{vertical-align:middle}

.table--strong thead th{
	font-size:12.5px;text-transform:none;letter-spacing:.02em;
	color:var(--text);font-weight:800;background:var(--surface2);
}
.table--products tbody td{font-size:17px;line-height:1.15}

/* ─── POS / Sale layout ──────────────────────────────────────── */
.pos-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:end}
@media (max-width:720px){.pos-grid{grid-template-columns:1fr}}

.sale-bottom{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) auto;gap:16px;align-items:end}
.sale-bottom__actions{display:flex;align-items:end}
@media (max-width:720px){.sale-bottom{grid-template-columns:1fr}}

.sale-submit{display:flex;flex-direction:column;gap:10px;align-items:flex-end;justify-content:flex-end}
.sale-submit--pos{flex-direction:row;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.sale-submit .alert{margin:0}
.sale-submit .card{width:100%}

.sale-result{display:flex;justify-content:flex-end;margin-top:14px}
.sale-result > .card{width:520px;max-width:100%}
.sale-result .alert{margin:0 0 10px 0}

.pos-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.pos-actions #printWrap{width:100%;justify-content:flex-end}
.pos-actions #printWrap:not([hidden]){display:flex}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination{
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;flex-wrap:wrap;margin-top:16px;
	padding-top:14px;border-top:1px solid rgba(15,23,42,.08);
}
.pagination__controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pagination__dots{color:var(--muted);font-weight:900;padding:0 4px;font-size:13px}

@media (max-width:720px){
	.sale-submit{align-items:stretch}
	.sale-result{justify-content:stretch}
}

/* ─── Receipt ────────────────────────────────────────────────── */
.receipt{max-width:420px;margin:14px auto 0 auto;padding:16px;border-radius:var(--radius)}
.receipt__title{font-weight:900;text-align:center;font-size:17px;letter-spacing:.2px}
.receipt__sub{text-align:center;color:var(--muted);font-weight:700;margin-top:4px;font-size:13px}
.receipt__divider{border:none;border-top:1px dashed rgba(15,23,42,.18);margin:12px 0}
.receipt__actions{display:flex;justify-content:flex-end;margin-bottom:10px}
.receipt .kv{padding:6px 0}
.receipt .table-wrap{overflow:visible;border:none}
.receipt table{font-size:13px}
.receipt thead th{text-transform:none;letter-spacing:0;font-size:11px}
.receipt th,.receipt td{padding:6px 6px}
.receipt tbody tr:hover{background:transparent}
.receipt td .muted{font-size:11px;font-weight:700}

.receipt--full{max-width:none;margin:0}
.receipt--pos .table-wrap{overflow:auto}

/* ─── Split layout ───────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.split > *{min-width:0}
.pos-col{display:flex;flex-direction:column;gap:14px;min-width:0}

@media print{
	body{background:#fff}
	.topbar,.banner-wrap,.badge-stack,.sale-submit,.pos-col,.footer{display:none !important}
	.receipt--pos{border:0;box-shadow:none}
	.no-print{display:none !important}

	body.print-scope-bill *{visibility:hidden !important}
	body.print-scope-bill #printArea,
	body.print-scope-bill #printArea *{visibility:visible !important}
	body.print-scope-bill #printArea{position:absolute;left:0;top:0;right:0}
}

@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ─── Menu grid ──────────────────────────────────────────────── */
.menu-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;margin-top:16px}
.menu-card{
	display:block;width:100%;text-align:left;cursor:pointer;
	background:rgba(255,255,255,.94);
	border:1px solid var(--border);
	border-radius:var(--radius-xl);
	padding:20px;
	box-shadow:var(--shadow-card);
	text-decoration:none;color:var(--text);
	transition:transform .20s cubic-bezier(.34,1.56,.64,1), box-shadow .20s ease;
	min-height:140px;
	position:relative;overflow:hidden;
}
.menu-card::after{
	content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
	background:var(--tone-gradient, linear-gradient(90deg, var(--primary), var(--primary2-light)));
	transform:scaleX(0);transform-origin:left;
	transition:transform .24s ease;
}
.menu-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--shadow-lg)}
.menu-card:hover::after{transform:scaleX(1)}
.menu-card:focus{outline:3px solid var(--focus);outline-offset:3px}

.menu-card--tone1{
	background:linear-gradient(140deg, rgba(var(--toneBlueRgb),.12) 0%, rgba(255,255,255,.96) 55%);
	--tone-gradient:linear-gradient(90deg, rgba(var(--toneBlueRgb),1), #60a5fa);
	--icon-bg:linear-gradient(135deg, rgba(var(--toneBlueRgb),.18), rgba(var(--toneBlueRgb),.08));
	--icon-border:rgba(var(--toneBlueRgb),.22);
	--icon-color:rgb(var(--toneBlueRgb));
	--icon-shadow:rgba(var(--toneBlueRgb),.20);
}
.menu-card--tone2{
	background:linear-gradient(140deg, rgba(var(--toneGreenRgb),.12) 0%, rgba(255,255,255,.96) 55%);
	--tone-gradient:linear-gradient(90deg, rgba(var(--toneGreenRgb),1), #4ade80);
	--icon-bg:linear-gradient(135deg, rgba(var(--toneGreenRgb),.18), rgba(var(--toneGreenRgb),.08));
	--icon-border:rgba(var(--toneGreenRgb),.22);
	--icon-color:rgb(var(--toneGreenRgb));
	--icon-shadow:rgba(var(--toneGreenRgb),.20);
}
.menu-card--tone3{
	background:linear-gradient(140deg, rgba(var(--toneOrangeRgb),.11) 0%, rgba(255,255,255,.96) 55%);
	--tone-gradient:linear-gradient(90deg, rgba(var(--toneOrangeRgb),1), #fb923c);
	--icon-bg:linear-gradient(135deg, rgba(var(--toneOrangeRgb),.18), rgba(var(--toneOrangeRgb),.08));
	--icon-border:rgba(var(--toneOrangeRgb),.22);
	--icon-color:rgb(var(--toneOrangeRgb));
	--icon-shadow:rgba(var(--toneOrangeRgb),.20);
}
.menu-card--tone4{
	background:linear-gradient(140deg, rgba(var(--tonePurpleRgb),.12) 0%, rgba(255,255,255,.96) 55%);
	--tone-gradient:linear-gradient(90deg, rgba(var(--tonePurpleRgb),1), #a78bfa);
	--icon-bg:linear-gradient(135deg, rgba(var(--tonePurpleRgb),.18), rgba(var(--tonePurpleRgb),.08));
	--icon-border:rgba(var(--tonePurpleRgb),.22);
	--icon-color:rgb(var(--tonePurpleRgb));
	--icon-shadow:rgba(var(--tonePurpleRgb),.20);
}
.menu-card--tone5{
	background:linear-gradient(140deg, rgba(var(--toneRedRgb),.11) 0%, rgba(255,255,255,.96) 55%);
	--tone-gradient:linear-gradient(90deg, rgba(var(--toneRedRgb),1), #f87171);
	--icon-bg:linear-gradient(135deg, rgba(var(--toneRedRgb),.18), rgba(var(--toneRedRgb),.08));
	--icon-border:rgba(var(--toneRedRgb),.22);
	--icon-color:rgb(var(--toneRedRgb));
	--icon-shadow:rgba(var(--toneRedRgb),.20);
}
.menu-card--tone6{
	background:linear-gradient(140deg, rgba(var(--toneBrownRgb),.10) 0%, rgba(255,255,255,.96) 55%);
	--tone-gradient:linear-gradient(90deg, rgba(var(--toneBrownRgb),1), #a16207);
	--icon-bg:linear-gradient(135deg, rgba(var(--toneBrownRgb),.18), rgba(var(--toneBrownRgb),.08));
	--icon-border:rgba(var(--toneBrownRgb),.22);
	--icon-color:rgb(var(--toneBrownRgb));
	--icon-shadow:rgba(var(--toneBrownRgb),.20);
}

.menu-card__head{display:grid;grid-template-columns:1fr 2fr;gap:14px;align-items:start}
.menu-card__icon{
	width:100%;aspect-ratio:1 / 1;border-radius:var(--radius-lg);
	display:flex;align-items:center;justify-content:center;
	background:var(--icon-bg, rgba(255,255,255,.65));
	border:1.5px solid var(--icon-border, var(--border));
	box-shadow:0 2px 10px var(--icon-shadow, rgba(15,23,42,.06)), inset 0 1px 0 rgba(255,255,255,.60);
	transition:var(--transition);
}
.menu-card:hover .menu-card__icon{
	filter:brightness(1.06) saturate(1.15);
	box-shadow:0 4px 16px var(--icon-shadow, rgba(15,23,42,.10)), inset 0 1px 0 rgba(255,255,255,.70);
}
.menu-card__icon svg{
	width:52px;height:52px;
	stroke:var(--icon-color, var(--muted));
	opacity:1;
	transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.menu-card:hover .menu-card__icon svg{transform:scale(1.10)}
.menu-card__content{min-width:0;padding-top:2px}

.menu-card__title{font-size:16px;font-weight:800;letter-spacing:.2px;margin:0 0 8px 0;line-height:1.3}
.menu-card__sub{color:var(--muted);font-weight:600;line-height:1.55;font-size:12px}
.menu-card__sub + .menu-card__sub{margin-top:3px}
.menu-card__hint{
	margin-top:12px;font-weight:700;font-size:12.5px;
	color:var(--icon-color, var(--primary));
	display:inline-flex;align-items:center;gap:4px;
}
.menu-card__hint::after{content:'→';font-size:14px;transition:transform .15s ease}
.menu-card:hover .menu-card__hint::after{transform:translateX(3px)}

@media (max-width:720px){
	.menu-grid{grid-template-columns:1fr}
	.menu-card__icon svg{width:44px;height:44px}
}

/* ─── Table core (outside .table-wrap) ───────────────────────── */
.table--strong thead th{font-size:12.5px;text-transform:none;letter-spacing:.02em;color:var(--text);font-weight:800;background:var(--surface2)}
.table--products tbody td{font-size:17px;line-height:1.15}

/* ─── Responsive globals ─────────────────────────────────────── */
@media (max-width:720px){
	.grid{grid-template-columns:1fr}
	.topbar__inner{flex-direction:column;align-items:flex-start;gap:8px}
	.topbar .container{padding-bottom:12px}
	.nav__group{flex-wrap:wrap}
	.card{padding:16px}
}

/* ─── Marquee notice ─────────────────────────────────────────── */
.marquee{
	font-size:14px;font-weight:600;color:var(--primary);
	display:inline-block;
	background:linear-gradient(90deg, rgba(37,99,235,.08), rgba(22,163,74,.07));
	border:1px solid rgba(37,99,235,.18);
	border-radius:var(--radius);
	padding:8px 16px;
	animation:fadeIn .3s ease;
}

/* ─── Login page layout ──────────────────────────────────────── */
.page--login{
	display:flex;
	flex-direction:column;
	min-height:100vh;
	background:#eff6ff !important; /* override global body gradient */
}
.page--login main.container{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-top:24px;
	padding-bottom:40px;
	position:relative;
	z-index:1;
}
.page--login main.container > *{
	width:100%;
	animation:scaleIn .28s cubic-bezier(.4,0,.2,1) both;
}

/* Animated blob background */
.login-bg{
	position:fixed;
	inset:0;
	z-index:0;
	overflow:hidden;
	background:linear-gradient(145deg, #eff6ff 0%, #f0fdf4 55%, #fefce8 100%);
}
.login-bg__blob{
	position:absolute;
	border-radius:50%;
	filter:blur(72px);
	opacity:.75;
}
.login-bg__blob--blue{
	width:620px;height:620px;
	top:-180px;left:-140px;
	background:radial-gradient(circle, rgba(37,99,235,.38) 0%, transparent 68%);
	animation:loginBlob1 18s ease-in-out infinite alternate;
}
.login-bg__blob--green{
	width:580px;height:580px;
	bottom:-140px;right:-120px;
	background:radial-gradient(circle, rgba(22,163,74,.32) 0%, transparent 68%);
	animation:loginBlob2 14s ease-in-out infinite alternate;
}
.login-bg__blob--yellow{
	width:460px;height:460px;
	bottom:10%;left:20%;
	background:radial-gradient(circle, rgba(234,179,8,.26) 0%, transparent 68%);
	animation:loginBlob3 20s ease-in-out infinite alternate;
}
.login-bg__blob--sky{
	width:500px;height:500px;
	top:20%;right:5%;
	background:radial-gradient(circle, rgba(56,189,248,.28) 0%, transparent 68%);
	animation:loginBlob4 16s ease-in-out infinite alternate;
}
@keyframes loginBlob1{
	0%  {transform:translate(0,0) scale(1)}
	40% {transform:translate(120px,90px) scale(1.18)}
	70% {transform:translate(50px,180px) scale(.88)}
	100%{transform:translate(-70px,60px) scale(1.12)}
}
@keyframes loginBlob2{
	0%  {transform:translate(0,0) scale(1)}
	35% {transform:translate(-110px,-70px) scale(1.22)}
	65% {transform:translate(-30px,-150px) scale(.82)}
	100%{transform:translate(90px,-40px) scale(1.10)}
}
@keyframes loginBlob3{
	0%  {transform:translate(0,0) scale(1)}
	30% {transform:translate(80px,-90px) scale(1.28)}
	70% {transform:translate(-60px,70px) scale(.78)}
	100%{transform:translate(100px,40px) scale(1.15)}
}
@keyframes loginBlob4{
	0%  {transform:translate(0,0) scale(1)}
	45% {transform:translate(-90px,80px) scale(1.20)}
	80% {transform:translate(60px,140px) scale(.86)}
	100%{transform:translate(-40px,-60px) scale(1.08)}
}

/* ─── Login card ─────────────────────────────────────────────── */
.login-card{
	padding:36px 42px;
	background:rgba(255,255,255,.96);
	backdrop-filter:blur(24px) saturate(180%);
	-webkit-backdrop-filter:blur(24px) saturate(180%);
	border:1px solid rgba(255,255,255,.80);
	box-shadow:
		0 0 0 1.5px rgba(37,99,235,.10),
		0 8px 28px rgba(37,99,235,.14),
		0 28px 72px rgba(15,23,42,.20),
		0 2px 6px rgba(15,23,42,.08);
	position:relative;
	overflow:hidden;
	animation:loginCardFloat 7s ease-in-out infinite;
}
/* gradient accent stripe at top */
.login-card::before{
	content:'';
	position:absolute;
	top:0;left:0;right:0;
	height:4px;
	background:linear-gradient(90deg, #2563eb 0%, #38bdf8 35%, #16a34a 65%, #eab308 100%);
	border-radius:0;
	pointer-events:none;
	z-index:1;
}
/* inner shine sweep */
.login-card::after{
	content:'';
	position:absolute;
	top:-60%;left:-60%;
	width:60%;height:200%;
	background:linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
	transform:skewX(-12deg);
	animation:loginCardShine 8s ease-in-out infinite;
	pointer-events:none;
	z-index:0;
}
@keyframes loginCardFloat{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-9px)}
}
@keyframes loginCardShine{
	0%,30%{left:-60%}
	60%,100%{left:140%}
}
.login-card__brand{
	width:104px;height:104px;margin:0 auto 20px auto;
	position:relative;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(22,163,74,.08));
	border-radius:var(--radius-xl);
	border:1.5px solid rgba(37,99,235,.18);
	animation:logoGlow 3s ease-in-out infinite;
}
.login-card__brand::before{
	content:'';
	position:absolute;inset:0;
	border-radius:inherit;
	background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.65) 50%, transparent 75%);
	background-size:200% 100%;
	animation:logoShimmer 2.6s ease-in-out infinite;
	pointer-events:none;z-index:1;
}
.login-card__brand::after{
	content:'';
	position:absolute;inset:-7px;
	border-radius:calc(var(--radius-xl) + 7px);
	box-shadow:0 0 0 3px rgba(37,99,235,.10), 0 0 28px rgba(37,99,235,.16);
	animation:logoRing 3s ease-in-out infinite;
	pointer-events:none;
}
.login-card__brand img{
	width:80px;height:80px;
	object-fit:contain;
	position:relative;z-index:2;
	filter:drop-shadow(0 2px 10px rgba(37,99,235,.22));
}
@keyframes logoGlow{
	0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.12), 0 4px 18px rgba(37,99,235,.08)}
	50%{box-shadow:0 0 0 7px rgba(37,99,235,.07), 0 8px 36px rgba(37,99,235,.16)}
}
@keyframes logoShimmer{
	0%{background-position:-200% 0}
	60%,100%{background-position:200% 0}
}
@keyframes logoRing{
	0%,100%{opacity:.5;transform:scale(1)}
	50%{opacity:1;transform:scale(1.05)}
}

@media (max-width:540px){.login-card{padding:24px 20px}}

/* ─── POS / Cashier page ─────────────────────────────────────── */
.page--pos{
	background:#f0fdf4 !important;
}
.page--pos main.container{
	position:relative;
	z-index:1;
}
/* Animated blob background */
.pos-bg{
	position:fixed;
	inset:0;
	z-index:0;
	overflow:hidden;
	background:linear-gradient(145deg, #f0fdf4 0%, #eff6ff 50%, #fefce8 100%);
	pointer-events:none;
}
.pos-bg__blob{
	position:absolute;
	border-radius:50%;
	filter:blur(80px);
	opacity:.70;
}
.pos-bg__blob--green{
	width:700px;height:700px;
	top:-200px;left:-180px;
	background:radial-gradient(circle, rgba(22,163,74,.36) 0%, transparent 68%);
	animation:posBlob1 20s ease-in-out infinite alternate;
}
.pos-bg__blob--blue{
	width:600px;height:600px;
	bottom:-160px;right:-130px;
	background:radial-gradient(circle, rgba(37,99,235,.28) 0%, transparent 68%);
	animation:posBlob2 16s ease-in-out infinite alternate;
}
.pos-bg__blob--yellow{
	width:500px;height:500px;
	bottom:12%;left:22%;
	background:radial-gradient(circle, rgba(234,179,8,.22) 0%, transparent 68%);
	animation:posBlob3 22s ease-in-out infinite alternate;
}
.pos-bg__blob--sky{
	width:540px;height:540px;
	top:18%;right:8%;
	background:radial-gradient(circle, rgba(56,189,248,.24) 0%, transparent 68%);
	animation:posBlob4 17s ease-in-out infinite alternate;
}
@keyframes posBlob1{
	0%{transform:translate(0,0) scale(1)}
	40%{transform:translate(130px,100px) scale(1.16)}
	70%{transform:translate(60px,200px) scale(.86)}
	100%{transform:translate(-80px,70px) scale(1.10)}
}
@keyframes posBlob2{
	0%{transform:translate(0,0) scale(1)}
	35%{transform:translate(-120px,-80px) scale(1.20)}
	65%{transform:translate(-40px,-160px) scale(.80)}
	100%{transform:translate(100px,-50px) scale(1.08)}
}
@keyframes posBlob3{
	0%{transform:translate(0,0) scale(1)}
	30%{transform:translate(90px,-100px) scale(1.24)}
	70%{transform:translate(-70px,80px) scale(.76)}
	100%{transform:translate(110px,50px) scale(1.13)}
}
@keyframes posBlob4{
	0%{transform:translate(0,0) scale(1)}
	45%{transform:translate(-100px,90px) scale(1.18)}
	80%{transform:translate(70px,150px) scale(.84)}
	100%{transform:translate(-50px,-70px) scale(1.06)}
}

/* POS hero bar */
.pos-hero{
	border-radius:var(--radius-lg);
	background:linear-gradient(135deg, #14532d 0%, #15803d 38%, #16a34a 65%, #0d9488 100%);
	padding:10px 20px;
	box-shadow:0 4px 24px rgba(22,163,74,.32), 0 1px 4px rgba(15,23,42,.10);
	position:sticky;
	top:66px;
	z-index:30;
	overflow:hidden;
	margin-bottom:14px;
	color:#fff;
	backdrop-filter:blur(12px);
}
.pos-hero::before{
	content:'';
	position:absolute;inset:0;
	background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
	background-size:200% 100%;
	animation:posHeroShimmer 6s ease-in-out infinite;
	pointer-events:none;
}
@keyframes posHeroShimmer{
	0%,20%{background-position:-200% 0}
	70%,100%{background-position:250% 0}
}
.pos-hero__particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.pos-hero__particles span{
	position:absolute;border-radius:50%;
	background:rgba(255,255,255,.10);
	animation:posPFloat linear infinite;
}
.pos-hero__particles span:nth-child(1){width:16px;height:16px;left:5%;top:25%;animation-duration:11s;animation-delay:0s}
.pos-hero__particles span:nth-child(2){width:9px;height:9px;left:14%;top:65%;animation-duration:8s;animation-delay:-2s}
.pos-hero__particles span:nth-child(3){width:22px;height:22px;left:32%;top:12%;animation-duration:14s;animation-delay:-5s}
.pos-hero__particles span:nth-child(4){width:7px;height:7px;left:52%;top:75%;animation-duration:9s;animation-delay:-1s}
.pos-hero__particles span:nth-child(5){width:13px;height:13px;left:65%;top:20%;animation-duration:12s;animation-delay:-4s}
.pos-hero__particles span:nth-child(6){width:18px;height:18px;left:76%;top:55%;animation-duration:10s;animation-delay:-3s}
.pos-hero__particles span:nth-child(7){width:8px;height:8px;left:88%;top:35%;animation-duration:13s;animation-delay:-7s}
@keyframes posPFloat{
	0%{transform:translateY(0) scale(1);opacity:.10}
	50%{transform:translateY(-55px) scale(1.25);opacity:.20}
	100%{transform:translateY(0) scale(1);opacity:.10}
}
.pos-hero__inner{
	position:relative;z-index:1;
	display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
	flex-wrap:wrap;
}
.pos-hero__title{
	display:flex;align-items:center;gap:8px;
	font-size:16px;font-weight:700;
	color:rgba(255,255,255,.72);
	text-transform:uppercase;letter-spacing:.10em;
	flex-shrink:0;
}
.pos-hero__icon{
	width:28px;height:28px;
	background:rgba(255,255,255,.18);
	border-radius:8px;
	display:flex;align-items:center;justify-content:center;
}
.pos-hero__icon svg{width:16px;height:16px;stroke:#fff}
.pos-badge-row{
	display:flex;gap:8px;width:auto;justify-content:flex-end;flex-wrap:wrap;
}
.pos-badge{
	flex:1;min-width:100px;max-width:200px;
	background:rgba(255,255,255,.15);
	border:1px solid rgba(255,255,255,.24);
	border-radius:var(--radius);
	padding:7px 14px;
	text-align:center;
	backdrop-filter:blur(8px);
	transition:var(--transition);
}
.pos-badge--main{
	background:rgba(255,255,255,.22);
	border-color:rgba(255,255,255,.40);
	box-shadow:0 2px 12px rgba(255,255,255,.10);
}
.pos-badge__label{
	font-size:10px;font-weight:700;
	color:rgba(255,255,255,.72);
	text-transform:uppercase;letter-spacing:.08em;
	margin-bottom:2px;
}
.pos-badge__value{
	font-size:28px;font-weight:900;
	color:#fff;
	line-height:1.1;
	font-variant-numeric:tabular-nums;
	letter-spacing:-.5px;
	transition:all .15s ease;
}
.pos-badge--main .pos-badge__value{font-size:36px}
.pos-badge__unit{
	font-size:11px;font-weight:700;color:rgba(255,255,255,.70);
	margin-top:1px;
}
@media (max-width:900px){
	.pos-hero__inner{flex-wrap:wrap}
	.pos-hero__title{width:100%;justify-content:center}
	.pos-badge-row{width:100%;justify-content:center}
	.pos-badge{min-width:0;flex:1 1 calc(33% - 8px)}
}
@media (max-width:720px){
	.pos-badge__value{font-size:22px}
	.pos-badge--main .pos-badge__value{font-size:28px}
	.pos-hero{top:60px}
}

/* POS scanner section */
.pos-scanner{
	background:rgba(255,255,255,.92);
	border:1.5px solid rgba(22,163,74,.22);
	border-radius:var(--radius-xl);
	padding:22px 24px;
	box-shadow:0 4px 24px rgba(22,163,74,.12), 0 1px 4px rgba(15,23,42,.06);
	position:relative;
	overflow:hidden;
}
.pos-scanner::before{
	content:'';
	position:absolute;top:0;left:0;right:0;height:3px;
	background:linear-gradient(90deg, #15803d, #22c55e, #0d9488);
	border-radius:0;
}
.pos-scanner__head{
	display:flex;align-items:center;gap:10px;
	margin-bottom:16px;
}
.pos-scanner__icon{
	width:36px;height:36px;
	background:linear-gradient(135deg, rgba(22,163,74,.16), rgba(22,163,74,.08));
	border:1px solid rgba(22,163,74,.22);
	border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	flex:0 0 auto;
}
.pos-scanner__icon svg{width:20px;height:20px;stroke:#15803d}
.pos-scanner__title{font-size:15px;font-weight:800;color:var(--text)}
.pos-scanner__hint{font-size:12px;color:var(--muted);font-weight:600}

/* POS payment section */
.pos-payment{
	background:rgba(255,255,255,.92);
	border:1.5px solid rgba(37,99,235,.18);
	border-radius:var(--radius-xl);
	padding:22px 24px;
	box-shadow:0 4px 24px rgba(37,99,235,.10), 0 1px 4px rgba(15,23,42,.06);
	position:relative;
	overflow:hidden;
}
.pos-payment::before{
	content:'';
	position:absolute;top:0;left:0;right:0;height:3px;
	background:linear-gradient(90deg, #1d4ed8, #38bdf8, #2563eb);
}
.pos-payment__head{
	display:flex;align-items:center;gap:10px;
	margin-bottom:16px;
}
.pos-payment__icon{
	width:36px;height:36px;
	background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(37,99,235,.06));
	border:1px solid rgba(37,99,235,.20);
	border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	flex:0 0 auto;
}
.pos-payment__icon svg{width:20px;height:20px;stroke:#1d4ed8}
.pos-payment__title{font-size:15px;font-weight:800;color:var(--text)}

/* POS receipt panel */
.pos-receipt{
	background:rgba(255,255,255,.95);
	border:1px solid var(--border);
	border-radius:var(--radius-xl);
	padding:20px;
	box-shadow:var(--shadow-card);
	height:100%;
}
.pos-receipt__head{
	display:flex;align-items:center;justify-content:space-between;
	margin-bottom:12px;padding-bottom:12px;
	border-bottom:1px solid rgba(15,23,42,.08);
}
.pos-receipt__title{
	font-size:14px;font-weight:800;
	color:var(--text);
	display:flex;align-items:center;gap:8px;
}
.pos-receipt__icon{
	width:28px;height:28px;
	background:linear-gradient(135deg, rgba(234,88,12,.12), rgba(234,88,12,.06));
	border:1px solid rgba(234,88,12,.18);
	border-radius:8px;
	display:flex;align-items:center;justify-content:center;
}
.pos-receipt__icon svg{width:16px;height:16px;stroke:#c2410c}
.pos-receipt__count{
	font-size:12px;font-weight:700;
	background:rgba(22,163,74,.12);
	color:#15803d;
	border:1px solid rgba(22,163,74,.22);
	border-radius:999px;
	padding:2px 10px;
}

/* POS action bar */
.pos-bar{
	display:flex;align-items:center;gap:10px;
	background:rgba(255,255,255,.88);
	border:1px solid var(--border);
	border-radius:var(--radius-xl);
	padding:14px 18px;
	box-shadow:var(--shadow);
	flex-wrap:wrap;
}
.pos-bar__left{display:flex;gap:8px;align-items:center;flex:1;min-width:0}
.pos-bar__right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pos-bar__submit{
	background:linear-gradient(135deg, #15803d, #16a34a) !important;
	box-shadow:0 4px 18px rgba(22,163,74,.38), 0 1px 4px rgba(15,23,42,.08) !important;
	font-size:18px !important;
	padding:16px 32px !important;
}
.pos-bar__submit:hover{
	box-shadow:0 8px 32px rgba(22,163,74,.50), 0 2px 8px rgba(15,23,42,.10) !important;
	transform:translateY(-2px) scale(1.02) !important;
}
.pos-bar__submit:active{
	transform:translateY(0) scale(1) !important;
}
.pos-msg{
	font-size:13px;font-weight:700;
	color:var(--muted);
	padding:4px 10px;
	border-radius:var(--radius-sm);
	background:rgba(15,23,42,.05);
	display:inline-flex;align-items:center;gap:6px;
}
.pos-msg--ok{color:#15803d;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.18)}
.pos-msg--err{color:#dc2626;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.16)}

/* short-key hint chip */
.key-hint{
	display:inline-flex;align-items:center;gap:4px;
	font-size:11px;color:var(--muted);font-weight:600;
}
.key-hint kbd{
	display:inline-block;
	padding:1px 5px;
	font-size:10px;font-family:inherit;font-weight:700;
	background:rgba(15,23,42,.07);
	border:1px solid rgba(15,23,42,.18);
	border-radius:5px;
	box-shadow:0 1px 0 rgba(15,23,42,.12);
	color:var(--text);
}
/* ─── Dividend my page ───────────────────────────────────────── */
.dv-page{
	display:flex;
	flex-direction:column;
	gap:20px;
}
/* Hero card */
.dv-hero{
	position:relative;
	border-radius:var(--radius-xl);
	overflow:hidden;
	background:linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 30%, #0ea5e9 62%, #16a34a 100%);
	box-shadow:0 16px 56px rgba(30,58,138,.38), 0 4px 16px rgba(15,23,42,.18);
	color:#fff;
	min-height:320px;
	display:flex;
	align-items:stretch;
}
.dv-hero__shimmer{
	position:absolute;inset:0;pointer-events:none;z-index:0;
	background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
	background-size:200% 100%;
	animation:dvHeroShimmer 5s ease-in-out infinite;
}
@keyframes dvHeroShimmer{
	0%,20%{background-position:-200% 0}
	70%,100%{background-position:250% 0}
}
/* floating particles */
.dv-hero__particles{
	position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.dv-hero__particles span{
	position:absolute;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	animation:dvParticleFloat linear infinite;
}
.dv-hero__particles span:nth-child(1){width:18px;height:18px;left:8%;top:30%;animation-duration:12s;animation-delay:0s}
.dv-hero__particles span:nth-child(2){width:10px;height:10px;left:18%;top:70%;animation-duration:9s;animation-delay:-3s}
.dv-hero__particles span:nth-child(3){width:24px;height:24px;left:35%;top:15%;animation-duration:15s;animation-delay:-6s}
.dv-hero__particles span:nth-child(4){width:8px;height:8px;left:55%;top:80%;animation-duration:10s;animation-delay:-1s}
.dv-hero__particles span:nth-child(5){width:14px;height:14px;left:68%;top:25%;animation-duration:13s;animation-delay:-5s}
.dv-hero__particles span:nth-child(6){width:20px;height:20px;left:78%;top:60%;animation-duration:11s;animation-delay:-2s}
.dv-hero__particles span:nth-child(7){width:9px;height:9px;left:90%;top:40%;animation-duration:14s;animation-delay:-8s}
.dv-hero__particles span:nth-child(8){width:16px;height:16px;left:48%;top:50%;animation-duration:16s;animation-delay:-4s}
@keyframes dvParticleFloat{
	0%{transform:translateY(0) scale(1);opacity:.12}
	50%{transform:translateY(-60px) scale(1.3);opacity:.22}
	100%{transform:translateY(0) scale(1);opacity:.12}
}

.dv-hero__inner{
	position:relative;z-index:1;
	width:100%;padding:40px 44px;
	display:flex;flex-direction:column;align-items:center;text-align:center;
}
.dv-hero__eyebrow{
	display:inline-flex;align-items:center;gap:7px;
	background:rgba(255,255,255,.15);
	border:1px solid rgba(255,255,255,.24);
	padding:5px 16px;border-radius:999px;
	font-size:13px;font-weight:700;letter-spacing:.06em;
	margin-bottom:14px;
}
.dv-hero__year{
	font-size:clamp(28px, 5vw, 44px);
	font-weight:900;
	letter-spacing:.04em;
	text-shadow:0 2px 18px rgba(15,23,42,.28);
	line-height:1.1;
	margin-bottom:6px;
}
.dv-hero__member{
	font-size:14px;font-weight:600;
	color:rgba(255,255,255,.78);
	margin-bottom:28px;
}
.dv-hero__total-label{
	font-size:13px;font-weight:700;
	color:rgba(255,255,255,.75);
	text-transform:uppercase;letter-spacing:.12em;
	margin-bottom:6px;
}
.dv-hero__total{
	font-size:clamp(48px, 9vw, 88px);
	font-weight:900;
	line-height:1;
	letter-spacing:-.01em;
	font-variant-numeric:tabular-nums;
	text-shadow:0 4px 32px rgba(15,23,42,.32);
	animation:dvTotalPop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dvTotalPop{
	0%{opacity:0;transform:scale(.72)}
	100%{opacity:1;transform:scale(1)}
}
.dv-hero__total-unit{
	font-size:18px;font-weight:700;
	color:rgba(255,255,255,.80);
	margin-top:4px;margin-bottom:28px;
}
/* Breakdown row */
.dv-hero__breakdown{
	display:flex;align-items:stretch;gap:0;
	background:rgba(255,255,255,.13);
	border:1px solid rgba(255,255,255,.22);
	border-radius:var(--radius-lg);
	width:100%;max-width:480px;
	overflow:hidden;
}
.dv-hero__part{
	flex:1;padding:16px 20px;
	display:flex;flex-direction:column;align-items:center;gap:4px;
}
.dv-hero__divider{
	width:1px;
	background:rgba(255,255,255,.22);
	margin:10px 0;
}
.dv-hero__part-label{
	display:flex;align-items:center;gap:5px;
	font-size:12px;font-weight:700;
	color:rgba(255,255,255,.72);
	text-transform:uppercase;letter-spacing:.08em;
}
.dv-hero__part-amount{
	font-size:20px;font-weight:900;
	color:#fff;
	font-variant-numeric:tabular-nums;
}
.dv-hero__part-amount span{font-size:12px;font-weight:600;color:rgba(255,255,255,.70);margin-left:3px}
.dv-hero__part-rate{
	background:rgba(255,255,255,.18);
	border-radius:999px;
	padding:2px 10px;
	font-size:11px;font-weight:700;
	color:rgba(255,255,255,.90);
}
.dv-hero__no-data{
	color:rgba(255,255,255,.68);font-size:15px;margin-top:20px;
}
/* Meta row */
.dv-meta{
	display:grid;
	grid-template-columns:1fr auto;
	align-items:start;
	gap:16px;
}
.dv-rate-card__head{
	display:flex;align-items:center;gap:7px;
	font-weight:800;font-size:15px;
	color:var(--primary);
	margin-bottom:12px;
}
.dv-actions{
	display:flex;flex-direction:column;gap:10px;
}
@media (max-width:640px){
	.dv-hero__inner{padding:28px 20px}
	.dv-hero__breakdown{flex-direction:column}
	.dv-hero__divider{width:auto;height:1px;margin:0 10px}
	.dv-meta{grid-template-columns:1fr;}
	.dv-actions{flex-direction:row;flex-wrap:wrap}
}

/* ─── Home – guest hero ──────────────────────────────────────── */
.hero-guest{
	padding:40px 32px;
	background:linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(22,163,74,.05) 100%);
	border:1px solid rgba(37,99,235,.14);
	text-align:left;
}
.hero-guest__body{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-guest__icon{
	flex:0 0 auto;width:88px;height:88px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(22,163,74,.10));
	border-radius:var(--radius-xl);border:1px solid rgba(37,99,235,.18);
}
.hero-guest__icon svg{width:52px;height:52px;stroke:var(--primary);opacity:.85}
.hero-guest__title{
	margin:0 0 6px 0;font-size:26px;font-weight:900;
	background:linear-gradient(90deg, var(--primary), var(--primary2));
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-guest__sub{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

/* ─── Home – welcome bar ─────────────────────────────────────── */
.home-welcome{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding-bottom:16px;margin-bottom:4px;
	border-bottom:1px solid var(--border);flex-wrap:wrap;
}

/* ─── Divider ────────────────────────────────────────────────── */
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.mt-sm{margin-top:8px}
.mt-md{margin-top:16px}
.text-danger{color:var(--danger)}
.text-success{color:var(--primary2)}
.fw-bold{font-weight:700}
.fw-black{font-weight:900}

@media (max-width:540px){
	.hero-guest{padding:28px 20px}
	.hero-guest__title{font-size:20px}
}