/* Unified Branding & Form Styles */
*{box-sizing:border-box}
:root{
	--primary-color:#1f3b73; --primary-hover:#1b2f5b; --secondary-color:#0ea5e9;
	--accent:#0ea5e9; --border-color:#d9e7ea; --card-bg:#ffffff;
	--text-primary:#111827; --text-secondary:#64748b;
	--shadow-lg:0 12px 24px rgba(0,0,0,.18);
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(135deg,#0f172a 0%,#1f2937 100%);min-height:100vh;padding:24px;position:relative}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),url('../icons/LuminoTec%20Logo.png') center/ min(80vw, 800px) no-repeat;opacity:0.08;pointer-events:none;z-index:0}
.container{max-width:1000px;margin:20px auto;padding:20px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.08);position:relative;z-index:1}
h1{margin:0 0 16px; font-size:clamp(1.4rem, 4.5vw, 2rem); font-weight:300; letter-spacing:.5px; color:#fff; background:linear-gradient(135deg,var(--primary-color) 0%, var(--primary-hover) 100%); padding:14px 16px; border-radius:12px; box-shadow:0 8px 20px rgba(31,59,115,.35)}

/* Sections */
.form-section{background:var(--card-bg);padding:24px;border-radius:16px;box-shadow:var(--shadow-lg);margin:16px 0;border:1px solid rgba(0,0,0,.05)}
.form-section h2{margin:0 0 16px; font-size:1.4rem}
.card{background:var(--card-bg);padding:24px;border-radius:16px;box-shadow:var(--shadow-lg);margin:16px 0;border:1px solid rgba(0,0,0,.05)}

/* Form layout */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin:10px 0}
.form-group label{display:block;margin:0 0 8px; color:var(--text-primary); font-weight:500}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=color],
.form-group textarea,
.form-group select{width:100%;padding:12px;border:2px solid #cbd5e1;border-radius:8px;font-size:1rem;transition:border-color .2s, box-shadow .2s; background:#f9fafb; color:var(--text-primary); box-shadow:0 1px 2px rgba(0,0,0,.03) inset}
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover{ border-color:#94a3b8 }
.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled{ background:#eef2f7; color:#94a3b8 }
.form-group input::placeholder,
.form-group textarea::placeholder{ color: var(--text-secondary) }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(31,59,115,.12)}

/* Logo */
.logo-row{display:flex;gap:16px;align-items:flex-start}
#logo-preview{width:96px;height:96px;border-radius:12px;border:1px solid var(--border-color);object-fit:contain;background:#fafafa}
/* First-run wizard preview image */
#w-logo-preview{width:96px;height:96px;border-radius:12px;border:1px solid var(--border-color);object-fit:contain;background:#fafafa;box-shadow:0 1px 2px rgba(0,0,0,.04) inset}
/* Logo actions layout to prevent overlap */
.logo-actions{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.logo-actions input[type=file]{max-width:100%}
/* Make native file button more appealing in contexts where it's visible */
.logo-actions input[type=file]::file-selector-button{
	padding:10px 16px;
	border-radius:10px;
	border:1px solid var(--border-color);
	background:linear-gradient(135deg,var(--primary-color) 0%, var(--primary-hover) 100%);
	color:#fff;
	cursor:pointer;
	box-shadow:0 4px 12px rgba(31,59,115,.3)
}
.logo-actions input[type=file]::file-selector-button:hover{
	transform:translateY(-1px);
	box-shadow:0 8px 20px rgba(31,59,115,.4)
}
.logo-actions small{display:block;color:var(--text-secondary);line-height:1.4;overflow-wrap:anywhere}

/* Colors */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.color-field{background:rgba(99,102,241,0.03);padding:16px;border-radius:12px;border:1px solid rgba(99,102,241,0.1)}
.preview{border:2px dashed rgba(99,102,241,0.3);border-radius:12px;padding:12px;margin-top:12px;background:rgba(255,255,255,0.5)}
.preview .band{background:var(--primary-color);color:#fff;padding:8px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.preview .content{border:2px solid var(--border-color);padding:8px;margin-top:8px;border-radius:8px;transition:all 0.3s ease}
.preview .total{background:var(--secondary-color);color:#fff;font-weight:700;padding:8px;margin-top:8px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}

/* Actions */
.form-actions{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--border-color);background:#f8fafc;cursor:pointer;transition:transform .2s, box-shadow .2s, filter .2s, background-color .2s}
.btn{color:var(--text-primary)}
.btn:not(.btn-primary):not(.btn-secondary):hover,
.btn:not(.btn-primary):not(.btn-secondary):focus-visible{background:#eef2f7}
.btn:active{transform:translateY(-1px)}
.back-btn{position:fixed; top:16px; left:16px; padding:8px 12px; background:rgba(255,255,255,.9); color:var(--primary-color); border:1px solid var(--border-color); border-radius:10px; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.12); backdrop-filter: blur(4px); z-index:1000}
.back-btn:hover{background:#fff; transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.16)}
.btn-primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(31,59,115,.3)}
.btn-primary:hover, .btn-primary:focus-visible{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,59,115,.4);filter:brightness(1.06)}
.btn-secondary:hover, .btn-secondary:focus-visible{background:linear-gradient(135deg,#6b7280 0%, #4b5563 100%)}
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;filter:none;box-shadow:none}
.btn-secondary{background:linear-gradient(135deg,#6b7280 0%, #4b5563 100%);color:#fff;border-color:transparent}
.status{color:var(--text-secondary)}
.warning{color:#b03815;margin-top:8px}

@media (max-width:768px){
	.form-row{grid-template-columns:1fr}
	.logo-row{flex-direction:column}
}
/* Template Preview */
.template-preview{margin-top:24px;padding:20px;border:2px solid var(--border-color);border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:all .3s ease}
.template-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.template-preview-title{font-size:20px;font-weight:700;color:var(--muted)}
.template-preview-date{font-size:12px;color:var(--text-secondary)}
.template-preview-section{background:var(--primary-color);color:#fff;padding:8px 12px;font-weight:700;font-size:13px;margin:12px 0 8px;border-radius:6px}
.template-preview-table{border:1px solid var(--border-color);border-radius:8px;overflow:hidden}
.template-preview-row{display:grid;grid-template-columns:2fr 1fr .5fr 1fr;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border-color);font-size:13px}
.template-preview-row:last-child{border-bottom:none}
.template-preview-row.header{background:var(--primary-color);color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:11px}
.template-preview-row .col-price,.template-preview-row .col-qty,.template-preview-row .col-total{text-align:right}
.template-preview-totals{margin-top:16px;display:flex;justify-content:flex-end}
.template-preview-total{background:var(--secondary-color);color:#fff;padding:12px 20px;font-weight:700;font-size:14px;border-radius:8px}
/* Classic Template Preview */
.template-preview.template-classic .template-preview-title{color:#1f2937;font-style:italic;font-size:24px;font-family:Georgia,'Times New Roman',serif}
.template-preview.template-classic .template-preview-section{background:#1f2937;border-radius:0}
.template-preview.template-classic .template-preview-row.header{background:#1f2937;font-size:11px}
.template-preview.template-classic .template-preview-table{border:2px solid #1f2937;border-radius:0}
.template-preview.template-classic .template-preview-total{background:#1f2937;border-radius:0}
.template-preview.template-classic{font-family:Georgia,'Times New Roman',serif}
/* Minimal Template Preview */
.template-preview.template-minimal .template-preview-title{color:#111;font-weight:400;font-size:18px}
.template-preview.template-minimal .template-preview-section{background:#f8fafc;color:#111;border-left:3px solid #111;padding-left:10px}
.template-preview.template-minimal .template-preview-row.header{background:#f3f4f6;color:#111;text-transform:none;letter-spacing:0;font-weight:600;font-size:12px}
.template-preview.template-minimal .template-preview-table{border:none}
.template-preview.template-minimal .template-preview-row{border-bottom:1px solid #e5e7eb}
.template-preview.template-minimal .template-preview-total{background:#111;border-radius:8px}
.template-preview.template-minimal{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}