/* Auth centering */
.auth-center {
	min-height: calc(100vh - 140px); /* adjust for navbar+footer approximate */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}
@media (max-width: 480px) {
	.auth-center { min-height: calc(100vh - 100px); }
}
.auth-box {
	width:100%;
	max-width:420px;
	background:#ffffff;
	border:1px solid #e5e7eb;
	padding:2rem 2.2rem;
	border-radius:14px;
	box-shadow:0 4px 20px rgba(0,0,0,0.06);
	position:relative;
}
.auth-box h1 {
	margin-top:0;
	text-align:center;
	font-size:1.55rem;
	margin-bottom:1.25rem;
}
.auth-box form label {
	display:block;
	font-weight:600;
	font-size:.9rem;
	margin-bottom:.85rem;
}
.auth-box form input[type=text],
.auth-box form input[type=email],
.auth-box form input[type=password],
.auth-box form textarea {
	margin-top:.35rem;
	width:100%;
	padding:.7rem .85rem;
	border:1px solid #d1d5db;
	border-radius:8px;
	font-size:.95rem;
	background:#f9fafb;
	transition:border-color .15s, background .15s, box-shadow .15s;
	box-sizing:border-box;
	resize:vertical;
	max-height:200px;
}
.auth-box form textarea { min-height:110px; }
.auth-box form input:focus,
.auth-box form textarea:focus {
	outline:none;
	border-color:#2563eb;
	background:#fff;
	box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.auth-box .btn {
	margin-top:.5rem;
	padding:.85rem 1rem;
	font-size:1rem;
	border-radius:8px;
	font-weight:600;
	letter-spacing:.3px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:.4rem;
	transition:background .18s, transform .18s, box-shadow .18s;
}
.auth-box .btn:hover {
	transform:translateY(-2px);
	box-shadow:0 8px 16px -6px rgba(0,0,0,.12);
}
.auth-box .btn:active { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(0,0,0,.15); }

/* Small helper link area under forms (if added later) */
.auth-box .form-footer { margin-top:1.25rem; text-align:center; font-size:.85rem; color:#555; }
.auth-box .form-footer a { color:#2563eb; text-decoration:none; font-weight:600; }
.auth-box .form-footer a:hover { text-decoration:underline; }

/* Responsive Navbar */
.navbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.navbar .nav-left { display:flex; align-items:center; gap:.75rem; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:transparent; border:none; padding:.4rem; cursor:pointer; }
.nav-toggle span { width:24px; height:2px; background:#111; display:block; transition:.25s; }
.nav-links { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }

@media (max-width: 820px) {
	.nav-toggle { display:flex; }
	.nav-links { position:fixed; top:0; left:0; height:100vh; width:270px; background:#ffffff; flex-direction:column; padding:5rem 1.25rem 2rem; gap:.35rem; box-shadow:4px 0 16px -4px rgba(0,0,0,.15); transform:translateX(-100%); transition:transform .3s ease; z-index:1000; }
	.nav-links li { padding:.15rem 0; }
	.nav-links a, .navbar button.linklike { display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:8px; }
	.nav-links a:hover, .navbar button.linklike:hover { background:#f3f4f6; }
	html.nav-open .nav-links { transform:translateX(0); }
	body.nav-open { overflow:hidden; }
	/* overlay */
	html.nav-open:before { content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); z-index:999; }
	/* Animate hamburger → X */
	html.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
	html.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
	html.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
	/* mobile-only icons */
	.mi { width:22px; height:22px; display:inline-grid; place-items:center; border-radius:6px; background:#e5e7eb; color:#111; font-size:12px; }
	.mi-home::before { content:"\2302"; }
	.mi-cart::before { content:"\1F6D2"; }
	.mi-pay::before { content:"\1F4B3"; }
	.mi-register::before { content:"+"; font-weight:800; }
	.mi-login::before { content:"\21B5"; }
	.mi-orders::before { content:"#"; font-weight:800; }
	.mi-admin::before { content:"\2699"; }
	.mi-logout::before { content:"\2716"; }
	.mi-news::before { content:"N"; font-weight:800; }
}

/* Admin worksheet cards */
.cards-grid.admin-ws-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
	gap:1.1rem;
	margin-top:1rem;
}
.ws-card.small { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.ws-card .thumb-wrap { width:100%; aspect-ratio:4/3; background:#f1f5f9; position:relative; overflow:hidden; }
.ws-card .thumb-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.ws-card .thumb-wrap .no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#777; }
.ws-card .card-body { padding:.75rem .85rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.ws-card .title { font-size:1rem; margin:0; line-height:1.2; font-weight:600; }
.ws-card .desc { font-size:.78rem; line-height:1.1rem; height:2.2rem; overflow:hidden; color:#555; margin:0; }
.ws-card .meta-line { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.7rem; }
.ws-card .price { font-weight:600; color:#111; font-size:.85rem; margin-right:.25rem; }
.ws-card .badge { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.6rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; background:#e2e8f0; color:#334155; }
.ws-card .badge.green { background:#dcfce7; color:#166534; }
.ws-card .badge.blue { background:#dbeafe; color:#1e3a8a; }
.ws-card .actions { margin-top:.4rem; display:flex; gap:.4rem; }
.btn.xsmall { padding:.4rem .6rem; font-size:.65rem; border-radius:6px; }
.btn.danger { background:#dc2626; }
.btn.danger:hover { background:#b91c1c; }

@media (max-width:600px) {
	.cards-grid.admin-ws-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
	.ws-card .desc { display:none; }
}

/* Modern Hero Section */
.modern-hero { padding:3.5rem 0 2.5rem; position:relative; overflow:hidden; }
.modern-hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 20%,#e0f2fe 0,#f5f7fa 55%); opacity:.65; z-index:0; }
.modern-hero .hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:3rem; align-items:center; }
.modern-hero .hero-text { max-width:680px; }
.modern-hero .eyebrow { font-size:.75rem; letter-spacing:1.5px; font-weight:600; text-transform:uppercase; color:#2563eb; margin-bottom:.75rem; }
.modern-hero h1 { font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; margin:.25rem 0 1rem; font-weight:700; }
.gradient-text { background:linear-gradient(90deg,#2563eb,#6366f1,#9333ea); -webkit-background-clip:text; background-clip:text; color:transparent; }
.modern-hero .sub { font-size:1.05rem; line-height:1.55rem; color:#374151; margin:0 0 1.2rem; }
.hero-benefits { list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.55rem; }
.hero-benefits li { font-size:.95rem; background:#ffffffcc; border:1px solid #e5e7eb; padding:.6rem .85rem; border-radius:10px; backdrop-filter:blur(4px); }
.hero-cta { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:0 0 1.25rem; }
.hero-cta .btn.big { padding:1rem 1.4rem; font-size:1.05rem; }
.hero-cta .link-alt { font-weight:600; color:#1e40af; text-decoration:none; position:relative; }
.hero-cta .link-alt:after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:.3s; }
.hero-cta .link-alt:hover:after { transform:scaleX(1); }
.hero-stats { display:flex; gap:2.2rem; flex-wrap:wrap; margin:0 0 1.2rem; }
.hero-stats .num { display:block; font-size:1.55rem; font-weight:700; background:linear-gradient(90deg,#0f172a,#2563eb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats .label { font-size:.75rem; letter-spacing:1px; text-transform:uppercase; color:#475569; }
.small-note { font-size:.7rem; color:#64748b; margin-top:.25rem; }

.hero-art { position:relative; min-height:360px; }
.floating-card { position:absolute; background:#fff; border:1px solid #e2e8f0; padding:.9rem 1.1rem; border-radius:14px; font-size:.9rem; font-weight:600; box-shadow:0 10px 30px -8px rgba(0,0,0,.15); animation:float 6s ease-in-out infinite; }
.floating-card span { display:block; font-weight:400; font-size:.7rem; color:#475569; margin-top:.2rem; letter-spacing:.5px; }
.floating-card.fc1 { top:8%; left:10%; animation-delay:0s; }
.floating-card.fc2 { top:40%; left:0%; animation-delay:1.5s; }
.floating-card.fc3 { top:65%; left:22%; animation-delay:3s; }
.floating-card.fc4 { top:15%; left:55%; animation-delay:0.7s; }
.floating-card.fc5 { top:5%; left:30%; animation-delay:2.2s; }
.floating-card.fc6 { top:50%; left:50%; animation-delay:3.4s; }
.floating-card.fc7 { top:72%; left:5%; animation-delay:4.1s; }
.floating-card.fc8 { top:32%; left:70%; animation-delay:5s; }
.floating-card.fc9 { top:78%; left:48%; animation-delay:5.6s; }
.floating-card.fc10 { top:25%; left:38%; animation-delay:6.3s; }
.hero-blob { position:absolute; right:-15%; top:10%; width:520px; height:520px; background:radial-gradient(circle at 30% 30%,#60a5fa,transparent 70%), radial-gradient(circle at 70% 60%,#a78bfa,transparent 70%); filter:blur(40px) saturate(140%); opacity:.55; animation:blobMove 18s linear infinite alternate; }

@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes blobMove { 0% { transform:translate(0,0) scale(1);} 50% { transform:translate(-40px,20px) scale(1.05);} 100% { transform:translate(-10px,-30px) scale(1);} }

@media (max-width:960px) {
	.hero-stats { gap:1.5rem; }
	.floating-card { transform:scale(.9); }
}
@media (max-width:680px) {
	.modern-hero { padding:2.5rem 0 1.5rem; }
	.hero-art { min-height:300px; }
	.floating-card { transform:scale(.82); }
	.floating-card.fc2 { left:4%; }
}
body { font-family: "Prompt", system-ui, sans-serif; margin:0; background:#f9f9fb; color:#222; }
.container { width: min(1200px,90%); margin: 1.5rem auto; }
.navbar { background:#1e73be; color:#fff; padding:.75rem 1rem; display:flex; align-items:center; }
.navbar .nav-toggle span { background:#fff; }
.navbar .brand { font-weight:600; color:#fff; text-decoration:none; margin-right:1rem; }
.navbar ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.navbar a, .navbar button.linklike { color:#fff; text-decoration:none; background:none; border:none; cursor:pointer; font:inherit; position:relative; }
.navbar a.active::after { content:''; position:absolute; left:0; bottom:-4px; height:3px; width:100%; background:#fbbf24; border-radius:2px; }
.footer { text-align:center; padding:2rem 0; font-size:.9rem; color:#666; }
/* Modern Site Footer */
.site-footer { background:#0f172a; color:#cbd5e1; margin-top:2rem; }
.site-footer .footer-inner { display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:1.2rem; padding:2rem 0; }
.site-footer .brand { font-weight:800; font-size:1.1rem; color:#e2e8f0; }
.site-footer .tag { color:#94a3b8; margin-top:.25rem; }
.footer-contact .contact-title { font-weight:700; margin-bottom:.5rem; color:#e2e8f0; }
.contact-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.contact-list li { display:flex; align-items:center; gap:.6rem; }
.contact-list a { color:#e5e7eb; text-decoration:none; }
.contact-list a:hover { text-decoration:underline; }
.footer-note { color:#94a3b8; font-size:.9rem; align-self:end; text-align:right; }
.ci { width:22px; height:22px; display:inline-grid; place-items:center; border-radius:6px; background:#1f2937; color:#93c5fd; font-size:12px; }
.ci-contract::before { content:"C"; font-weight:800; }
.ci-mail::before { content:"@";font-weight:800; }
.ci-line::before { content:"L"; font-weight:800; }
.ci-fb::before { content:"f"; font-weight:800; }
.ci-phone::before { content:"\260E"; }
@media (max-width: 900px) {
	.site-footer .footer-inner { grid-template-columns: 1fr; gap:1rem; text-align:left; }
	.footer-note { text-align:left; }
}
.hero { background:linear-gradient(135deg,#ffedd5,#fde68a); padding:2rem; border-radius:12px; }
.hero h1 { margin-top:0; }
.benefits { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-top:1rem; }
.card { background:#fff; border:1px solid #eee; padding:1rem; border-radius:10px; display:flex; flex-direction:column; gap:.5rem; box-shadow:0 2px 4px rgba(0,0,0,.05); }
.worksheet-card { transition:transform .25s, box-shadow .25s; }
.worksheet-card:hover { transform:translateY(-4px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.card img.thumb { width:100%; height:140px; object-fit:cover; border-radius:8px; }
.grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.btn { background:#2563eb; color:#fff; padding:.55rem 1rem; border:none; border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { background:#1d4ed8; }
.btn.small { padding:.35rem .75rem; font-size:.85rem; }
.danger { background:#dc2626; color:#fff; border:none; padding:.4rem .75rem; border-radius:6px; cursor:pointer; }
.flash-wrapper { margin:.75rem 0; display:flex; flex-direction:column; gap:.4rem; }
.flash { padding:.6rem .9rem; border-radius:6px; font-size:.9rem; }
.flash.success { background:#d1fae5; color:#065f46; }
.flash.error { background:#fee2e2; color:#991b1b; }
.table { width:100%; border-collapse:collapse; background:#fff; }
.table th, .table td { padding:.55rem .7rem; border-bottom:1px solid #eee; text-align:left; }
.table.small th, .table.small td { font-size:.85rem; }
.form { display:flex; flex-direction:column; gap:.75rem; background:#fff; padding:1.25rem; border:1px solid #eee; border-radius:10px; max-width:520px; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form textarea, select { width:100%; padding:.55rem .6rem; border:1px solid #ccc; border-radius:6px; font:inherit; }
.notice { background:#fff3cd; padding:.6rem .8rem; border-radius:6px; font-size:.85rem; }
.download-list { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.download-item { background:#fff; border:1px solid #eee; padding:.6rem; border-radius:8px; display:flex; gap:.6rem; }
.download-item img { width:60px; height:60px; object-fit:cover; border-radius:6px; }
.price { font-weight:600; color:#1d4ed8; }
.badge { display:inline-block; padding:.25rem .55rem; font-size:.65rem; font-weight:600; border-radius:999px; background:#e5e7eb; color:#374151; margin-bottom:.25rem; }
.badge-solution { background:#065f46; color:#d1fae5; }

/* News Section */
.news-section { margin:2rem 0; }
.news-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.news-head .hint { color:#64748b; font-size:.9rem; }
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.news-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.news-card:hover { transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,.08); }
.news-thumb { width:100%; aspect-ratio:16/9; background:#f1f5f9; display:grid; place-items:center; }
.news-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.news-thumb .no-thumb { color:#94a3b8; font-size:.85rem; }
.news-body { padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; }
.news-title { margin:.2rem 0; font-size:1.05rem; line-height:1.35; }
.news-meta { color:#6b7280; font-size:.8rem; }
.news-excerpt { color:#374151; font-size:.92rem; line-height:1.4; margin:0; }

/* News Detail */
.news-detail .news-article { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1.25rem; }
.news-detail .news-hero { margin: .5rem 0 1rem; }
.news-detail .news-hero img { width:100%; height:auto; border-radius:10px; display:block; }
.news-detail .news-content { color:#1f2937; line-height:1.7; }

/* Customer Dashboard Modern */
.cust-dashboard { display:flex; flex-direction:column; gap:2.5rem; }
.dash-header { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; }
.dash-title { margin:0 0 .4rem; font-size:clamp(1.6rem,3.5vw,2.2rem); font-weight:700; letter-spacing:.5px; }
.dash-sub { margin:0; color:#4b5563; font-size:.95rem; }
.dash-stats { display:flex; gap:1rem; flex-wrap:wrap; }
.stat-card { background:#ffffff; border:1px solid #e5e7eb; padding:.9rem 1.1rem; border-radius:14px; min-width:140px; position:relative; overflow:hidden; }
.stat-card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(59,130,246,.12)); opacity:.6; pointer-events:none; }
.stat-card .label { display:block; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:#64748b; font-weight:600; margin-bottom:.35rem; }
.stat-card .value { font-size:1.5rem; font-weight:700; background:linear-gradient(90deg,#1e3a8a,#2563eb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cust-dashboard.modern { padding: 28px 0; }
.dash-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dash-title { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.02em; }
.dash-sub { margin: 0; color: #64748b; }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 14px; }
.stat-card { background: linear-gradient(180deg, #ffffff, #fafafa); border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.stat-card .icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; color: #4338ca; position: relative; }
.stat-card .icon.i-orders::after { content: "\1F4DD"; font-size: 18px; }
.stat-card .icon.i-download { background: #ecfeff; color: #0e7490; }
.stat-card .icon.i-download::after { content: "\2B07"; font-size: 18px; }
.stat-card .icon.i-status { background: #fef3c7; color: #b45309; }
.stat-card .icon.i-status::after { content: "\26A1"; font-size: 18px; }
.stat-card .stat-meta { display: flex; flex-direction: column; gap: 4px; }
.stat-card .label { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stat-card .value { font-size: 22px; font-weight: 700; color: #0f172a; }
.card-block { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.orders-section, .downloads-section { margin-top: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head .head-left { display: flex; align-items: center; gap: 10px; }
.head-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #eff6ff; color: #1d4ed8; }
.head-icon.i-receipt::after { content: "\1F9FE"; }
.head-icon.i-download { background: #ecfeff; color: #0ea5e9; }
.head-icon.i-download::after { content: "\2B07"; }
.section-head h2 { margin: 0; font-size: 18px; }
.section-head .hint { color: #64748b; font-size: 13px; }
.table-wrapper { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: auto; }
.table-modern { width: 100%; border-collapse: collapse; }
.table-modern th, .table-modern td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; text-align: left; }
.table-modern thead th { background: #f8fafc; font-size: 12px; color: #475569; text-transform: uppercase; letter-spacing: .04em; }
.table-modern tbody tr:hover { background: #fafafa; }
.table-modern .empty { text-align: center; color: #94a3b8; }
.titles-cell .titles-wrapper { max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; border: 1px solid transparent; }
.status-badge.paid { background: #e6fffa; color: #0f766e; border-color: #99f6e4; }
.status-badge.pending { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.status-badge.cancelled, .status-badge.failed { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-badge.pill { border-radius: 999px; }
.downloads-grid.modern-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dl-card.modern { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; display: flex; gap: 0; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.dl-card .thumb { width: 120px; flex: 0 0 120px; background: #f8fafc; display: grid; place-items: center; border-right: 1px solid #f1f5f9; }
.dl-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.dl-body { padding: 12px; display: flex; flex: 1; flex-direction: column; gap: 8px; }
.dl-title { margin: 0; font-size: 16px; line-height: 1.3; }
.dl-meta { display: flex; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; background: #f1f5f9; color: #0f172a; border: 1px solid #e5e7eb; }
.chip.alt { background: #eef2ff; color: #3730a3; border-color: #e0e7ff; }
.dl-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn.tiny { padding: 8px 12px; font-size: 12px; }
.btn.small { padding: 10px 14px; font-size: 13px; }
.btn.ghost { background: transparent; border: 1px solid #e5e7eb; color: #0f172a; }
.btn.primary { background: #2563eb; color: #fff; }
.btn.success { background: #22c55e; color: #fff; }
.empty-panel { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 20px; display: grid; place-items: center; gap: 8px; color: #475569; }
.empty-wrap { display: flex; align-items: center; gap: 10px; justify-content: center; color: #94a3b8; }
.empty-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; color: #3730a3; }
.empty-icon.i-download { background: #ecfeff; color: #0ea5e9; }
.empty-icon::after { content: "\1F4E5"; }

@media (max-width: 1024px) {
	.dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.downloads-grid.modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.dash-header { flex-direction: column; align-items: flex-start; }
	.dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.downloads-grid.modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.dash-stats { grid-template-columns: 1fr; }
	.downloads-grid.modern-grid { grid-template-columns: 1fr; }
	.dl-card.modern { flex-direction: column; }
	.dl-card .thumb { width: 100%; height: 160px; border-right: 0; border-bottom: 1px solid #f1f5f9; }
}

.section-head { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
.section-head h2 { margin:0; font-size:1.3rem; }
.section-head .hint { font-size:.75rem; background:#eef2ff; color:#3730a3; padding:.3rem .6rem; border-radius:6px; }

/* Orders table */
.table-wrapper { background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
.table.modern { width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; }
.table.modern thead tr { background:#f1f5f9; }
.table.modern th { font-weight:600; text-transform:uppercase; font-size:.6rem; letter-spacing:1px; color:#475569; padding:.7rem .75rem; }
.table.modern td { padding:.65rem .75rem; border-top:1px solid #f1f5f9; vertical-align:top; }
.table.modern tbody tr:hover { background:#f8fafc; }
.table.modern .empty { text-align:center; padding:1.2rem; font-size:.85rem; color:#6b7280; }
.titles-cell { max-width:260px; }
.titles-wrapper { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; line-height:1.15rem; }

/* Status badges */
.status-badge { display:inline-block; padding:.35rem .6rem; border-radius:999px; font-size:.6rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:#e2e8f0; color:#334155; }
.status-badge.paid { background:#dcfce7; color:#166534; }
.status-badge.pending { background:#fef9c3; color:#854d0e; }
.status-badge.cancelled, .status-badge.failed { background:#fee2e2; color:#b91c1c; }

/* Downloads grid */
.downloads-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.dl-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:0 4px 14px -6px rgba(0,0,0,.08); transition:transform .25s, box-shadow .25s; }
.dl-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px -10px rgba(0,0,0,.18); }
.dl-card .thumb { aspect-ratio:4/3; background:#f1f5f9; overflow:hidden; }
.dl-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dl-body { padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.6rem; }
.dl-title { margin:0; font-size:.95rem; font-weight:600; line-height:1.2; }
.dl-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn.tiny { padding:.35rem .65rem; font-size:.65rem; border-radius:6px; }
.btn.tiny.alt { background:#475569; }
.btn.tiny.alt:hover { background:#334155; }
.downloads-grid .empty { grid-column:1/-1; text-align:center; color:#6b7280; }

/* Responsive table collapse */
@media (max-width:760px) {
	.table.modern thead { display:none; }
	.table.modern tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .75rem; padding:.85rem .85rem; border-bottom:1px solid #f1f5f9; }
	.table.modern td { border:none; padding:.15rem 0; }
	.table.modern td[data-label]::before { content:attr(data-label); display:block; font-size:.55rem; text-transform:uppercase; letter-spacing:1px; color:#64748b; margin-bottom:2px; font-weight:600; }
	.titles-cell { grid-column:1 / -1; }
		.titles-wrapper { -webkit-line-clamp:3; line-clamp:3; }
}

@media (max-width:520px) {
	.dash-stats { flex-direction:column; width:100%; }
	.stat-card { width:100%; }
	.downloads-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* Error pages */
.error-page .error-code { font-size:3rem; margin:.2rem 0; background:linear-gradient(90deg,#2563eb,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Worksheet Detail Layout */
.worksheet-detail { padding:2rem 0 3rem; }
.worksheet-detail .wd-container { display:flex; gap:2.5rem; align-items:flex-start; }
.worksheet-detail .wd-image { flex:0 0 420px; max-width:420px; }
.worksheet-detail .wd-image img { width:100%; height:auto; border-radius:12px; box-shadow:0 10px 24px -12px rgba(0,0,0,.15); display:block; }
.worksheet-detail .wd-info { flex:1 1 auto; min-width:300px; }
.worksheet-detail h1 { margin:0; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.15; }
.wd-head { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.35rem; }
.wd-badges .badge { margin-left:.2rem; }
.badge-preview { background:#1e3a8a; color:#e0e7ff; }
.worksheet-detail .wd-price { font-size:1.55rem; font-weight:700; color:#1e73be; margin:.4rem 0 1rem; }
.wd-price-line { display:flex; align-items:baseline; gap:1rem; margin:.25rem 0 1rem; }
.wd-price-sub { font-size:.9rem; color:#64748b; }
.wd-social-proof { display:flex; align-items:center; gap:.8rem; margin:.2rem 0 1rem; color:#f59e0b; }
.wd-social-proof .stars { letter-spacing:2px; font-size:1rem; }
.wd-social-proof .dl-count { color:#64748b; font-weight:600; }
.worksheet-detail .wd-desc { font-size:1rem; line-height:1.55rem; color:#374151; margin:0 0 1.25rem; }
.wd-features { list-style:none; padding:0; margin:0 0 1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.wd-features li { background:#f1f5f9; color:#334155; padding:.35rem .6rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.worksheet-detail .wd-meta { list-style:none; padding:0; margin:0 0 1.5rem; font-size:.85rem; color:#555; display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; }
.worksheet-detail .wd-meta li { background:#f1f5f9; padding:.4rem .7rem; border-radius:999px; font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#334155; }
.worksheet-detail .wd-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.worksheet-detail .wd-actions .btn { flex:0 0 auto; }
.worksheet-detail .link-alt { text-decoration:none; font-weight:600; color:#1e40af; }
.worksheet-detail .link-alt:hover { text-decoration:underline; }
.worksheet-detail .trust-note { width:100%; font-size:.8rem; color:#64748b; margin-top:.25rem; }
@media (max-width: 960px) {
	.worksheet-detail .wd-container { flex-direction:column; }
	.worksheet-detail .wd-image { max-width:360px; margin:0 auto; }
	.worksheet-detail .wd-actions { justify-content:center; }
	.worksheet-detail .wd-meta { justify-content:center; }
	.worksheet-detail .wd-desc { text-align:center; }
	.worksheet-detail h1 { text-align:center; }
	.wd-head { justify-content:center; }
	.wd-price-line { justify-content:center; }
	.wd-features { justify-content:center; }
}

/* About page */
.about-section { padding:2rem 0; }
.about-hero { text-align:center; max-width:900px; margin:0 auto 1.25rem; }
.about-hero .about-intro { font-size:1.05rem; color:#374151; line-height:1.6; margin:.5rem 0 1rem; }
.about-hero .about-tags { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.about-hero .tag { background:#eef2ff; color:#3730a3; padding:.3rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }

.about-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 6px 18px -8px rgba(0,0,0,.08); padding:1.25rem 1.5rem; max-width:1000px; margin:1.25rem auto 2rem; display:flex; gap:2rem; align-items:flex-start; }
.about-left { flex:0 0 300px; max-width:300px; }
.photo-wrap { position:relative; }
.about-photo { width:100%; height:auto; border-radius:12px; box-shadow:0 10px 24px -10px rgba(0,0,0,.15); display:block; }
.photo-badge { position:absolute; left:10px; bottom:10px; background:#1e73be; color:#fff; font-size:.75rem; padding:.25rem .5rem; border-radius:999px; box-shadow:0 6px 14px -6px rgba(30,115,190,.5); }
.about-right { flex:1 1 auto; min-width:300px; }
.about-right h1 { margin-top:.25rem; margin-bottom:.5rem; font-size:clamp(1.6rem,3vw,2.1rem); }
.about-right h2 { margin:1.25rem 0 .5rem; font-size:1.15rem; }
.about-right p { line-height:1.6; color:#374151; }
.about-right ul { padding-left:1.2rem; }

.info-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.info-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:.9rem 1rem; }
.info-card h3 { margin:.2rem 0 .6rem; font-size:1rem; }
.kv { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.kv .key { font-weight:600; color:#111827; margin-right:.5rem; }
.kv .val { color:#374151; }

.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.contact-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:.8rem 1rem; text-decoration:none; color:inherit; display:flex; gap:.7rem; align-items:center; box-shadow:0 6px 18px -10px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s; }
.contact-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(0,0,0,.18); }
.contact-card .icon { font-size:1.2rem; }
.contact-card .text .label { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:#64748b; font-weight:700; }
.contact-card .text .value { font-weight:600; }

@media (max-width: 860px){
	.about-card { flex-direction:column; align-items:center; text-align:center; }
	.about-left { max-width:240px; }
	.about-right { min-width:auto; }
	.about-right ul { text-align:left; display:inline-block; }
	.info-grid { grid-template-columns:1fr; }
}