@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* THEME VARIABLES */
:root {
 color-scheme: light dark;
 --page-bg: #f7f9fb;
 --text: #0f172a;
 --muted: #6b7280;
 --heading: #0f172a;
 --card-bg: #ffffff;
 --card-border: #e5e7eb;
 --shadow-1:01px2px rgba(16,24,40,0.06),01px3px rgba(16,24,40,0.10);
 --input-bg: #ffffff;
 --input-text: #0f172a;
 --input-border: #cbd5e1;
 --placeholder: #9ca3af;
 --focus: #2563eb;
 --btn-start: #2563eb;
 --btn-end: #7c3aed;
 --btn-text: #ffffff;
 --success-bg: #e9fbe7;
 --success-text: #065f46;
 --success-border: #9ae6b4;
 --error-bg: #fdeaea;
 --error-text: #991b1b;
 --error-border: #fecaca;

 /* Readability sizing tokens */
 --font-base:16px; /* base font */
 --font-input:16px; /* input text size */
 --font-label:15px; /* label text size */
 --font-help:14px; /* help text size */
 --control-padding-y:14px; /* input vertical padding */
 --control-padding-x:16px; /* input horizontal padding */
 --control-radius:12px; /* input/button radius */
}

.theme-dark {
 --page-bg: radial-gradient(1200px600px at20% -10%, #1f29370%, rgba(31,41,55,0)60%),
 radial-gradient(1000px500px at100%0%, #0ea5e90%, rgba(14,165,233,0)40%),
 linear-gradient(180deg, #0b10200%, #0b1220100%);
 --text: #e5e7eb;
 --muted: #9ca3af;
 --heading: #f9fafb;
 --card-bg: rgba(17,24,39,0.85);
 --card-border: rgba(148,163,184,0.18);
 --shadow-1:06px24px rgba(2,6,23,0.5);
 --input-bg: #0f172a;
 --input-text: #e5e7eb;
 --input-border: #334155;
 --placeholder: #94a3b8;
 --focus: #22d3ee;
 --btn-start: #06b6d4;
 --btn-end: #7c3aed;
 --btn-text: #ffffff;
 --success-bg: rgba(16,185,129,0.12);
 --success-text: #34d399;
 --success-border: rgba(16,185,129,0.35);
 --error-bg: rgba(239,68,68,0.12);
 --error-text: #f87171;
 --error-border: rgba(239,68,68,0.35);
}

/* RESET */
* { box-sizing: border-box; margin:0; padding:0; }

/* PAGE */
body {
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background: var(--page-bg);
 min-height:100vh;
 padding:28px;
 line-height:1.65;
 color: var(--text);
 font-size: var(--font-base);
}

.container { max-width:1120px; margin:0 auto; }

.header-row { display: flex; align-items: center; gap:12px; justify-content: space-between; margin-bottom:24px; }

h1 { color: var(--heading); font-size:2.1rem; font-weight:700; display: flex; align-items: center; gap:12px; }

/* THEME TOGGLE */
.theme-toggle { display: inline-flex; align-items: center; gap:8px; }
.theme-toggle button {
 appearance: none; border:1px solid var(--card-border); color: var(--text);
 background: var(--card-bg); border-radius:999px; padding:10px14px; cursor: pointer;
 box-shadow: var(--shadow-1); font-weight:600; font-size:0.95rem;
}

/* CARD */
.card { background: var(--card-bg); border-radius:16px; border:1px solid var(--card-border); box-shadow: var(--shadow-1); padding:22px; margin-bottom:18px; }
.card-title { font-size:1.2rem; font-weight:700; color: var(--heading); margin-bottom:16px; padding-bottom:10px; border-bottom:1px dashed var(--card-border); }

/* FORM */
.form-group { margin-bottom:16px; }
.form-group:last-child { margin-bottom:0; }
label { display: block; font-weight:600; color: var(--text); margin-bottom:8px; font-size: var(--font-label); }
.help-text { font-size: var(--font-help); color: var(--muted); margin-top:6px; }

input[type="text"], 
input[type="number"], 
input[type="password"], 
select {
 width:100%; padding: var(--control-padding-y) var(--control-padding-x); border:1px solid var(--input-border); border-radius: var(--control-radius);
 font-size: var(--font-input); background: var(--input-bg); color: var(--input-text);
 transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input::placeholder { color: var(--placeholder); font-size:0.95em; }
input[type="text"]:hover, 
input[type="number"]:hover, 
input[type="password"]:hover, 
select:hover { border-color: #94a3b8; }
input[type="text"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
select:focus { outline: none; border-color: var(--focus); box-shadow:0003px color-mix(in srgb, var(--focus)25%, transparent); }
input[type="text"]:read-only { background: color-mix(in srgb, var(--input-bg)90%, #00010%); color: var(--muted); }
/* BUTTON */
.button-primary {
 width:100%; padding:16px18px; border: none; border-radius: var(--control-radius); cursor: pointer;
 background: linear-gradient(135deg, var(--btn-start)0%, var(--btn-end)100%);
 color: var(--btn-text); font-weight:700; font-size:1.05rem; box-shadow: var(--shadow-1);
 transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.button-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.button-primary:active { transform: translateY(0); }
.button-primary:disabled { filter: grayscale(40%); cursor: not-allowed; }

/* RESULT BANNERS */
#result { padding:12px14px; border-radius:10px; font-weight:600; margin-top:12px; display: none; }
#result.success { display: block; background: var(--success-bg); color: var(--success-text); border:1px solid var(--success-border); }
#result.error { display: block; background: var(--error-bg); color: var(--error-text); border:1px solid var(--error-border); }

/* GRID */
.dimensions-grid { display: grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:8px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { font-size:0.95rem; color: var(--muted); margin-bottom:6px; }

/* MOBILE */
@media (max-width:768px) { .container { max-width:100%; } .dimensions-grid { grid-template-columns:1fr; } }