:root{
	--bg:#0a0f1a; /* black/dark background */
	--panel:#0e1626; /* deep navy surfaces */
	--muted:#9aa6b2; /* text muted */
	--text:#f1f5f9; /* near-white text */
	--primary:#f97316; /* orange */
	--primary-600:#ea580c; /* darker orange */
	--danger:#ef4444;
	--success:#10b981;
	--ring: rgba(249,115,22,.35); /* orange focus ring */
	--accent:#1e40af; /* dark blue accent */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Ubuntu,system-ui;background:radial-gradient(1200px 600px at 80% -10%, rgba(30,64,175,.22), transparent 60%), radial-gradient(1000px 800px at -10% 110%, rgba(249,115,22,.18), transparent 60%), var(--bg);color:var(--text)}
/* Animated aurora background for login */
.bg-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1200px 600px at 80% -10%, rgba(30,64,175,.22), transparent 60%), radial-gradient(1000px 800px at -10% 110%, rgba(249,115,22,.18), transparent 60%), var(--bg);overflow:hidden}
.bg-aurora::before,.bg-aurora::after{content:"";position:absolute;inset:-20%;filter:blur(60px);opacity:.6;background:conic-gradient(from 0deg, rgba(30,64,175,.35), rgba(249,115,22,.3), rgba(30,64,175,.35), rgba(0,0,0,.28), rgba(30,64,175,.35));animation:auroraMove 24s linear infinite}
.bg-aurora::after{animation-duration:32s;animation-direction:reverse;mix-blend-mode:screen;opacity:.5}
@keyframes auroraMove{0%{transform:translate3d(-10%, -10%, 0) rotate(0deg) scale(1.05)}50%{transform:translate3d(10%, 10%, 0) rotate(180deg) scale(1.1)}100%{transform:translate3d(-10%, -10%, 0) rotate(360deg) scale(1.05)}}

.container{max-width:1280px;margin:0 auto;padding:20px}
@media (max-width: 480px){.container{padding:16px}}

.card{background:var(--panel);border:1px solid rgba(148,163,184,.18);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card-body{padding:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card h2{font-size:18px;margin:0 0 12px;color:#fff}

.input{width:100%;padding:12px 12px;border:1px solid rgba(148,163,184,.25);border-radius:12px;background:rgba(15,23,42,.6);color:var(--text);outline:none}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 6px var(--ring)}
.input[type=number]::-webkit-outer-spin-button,
.input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.input[type=number]{ -moz-appearance: textfield; }
.label{display:block;margin:8px 0 6px;color:var(--muted);font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;border:1px solid transparent;background:var(--primary);color:#fff;font-weight:500;font-size:14px;cursor:pointer;box-shadow:0 2px 8px rgba(249,115,22,.25);transition:all 0.2s ease}
.btn:hover{background:var(--primary-600);box-shadow:0 4px 12px rgba(249,115,22,.35)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(249,115,22,.25)}
.btn-ghost{background:transparent;border-color:rgba(148,163,184,.3);color:var(--text);box-shadow:none}
.btn-ghost:hover{background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.4)}
.btn-danger{background:var(--danger);box-shadow:0 2px 8px rgba(220,38,38,.2)}
.btn-danger:hover{background:#dc2626;box-shadow:0 4px 12px rgba(220,38,38,.3)}
/* Subtler danger button for admin page */
.btn-danger-subtle{background:transparent;border:1px solid rgba(239,68,68,.4);color:#f87171;box-shadow:none}
.btn-danger-subtle:hover{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.5)}

.header{position:sticky;top:0;z-index:20;background:rgba(2,6,23,.8);backdrop-filter:blur(8px);border-bottom:1px solid rgba(148,163,184,.12)}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(16px + env(safe-area-inset-top)) 16px 16px 16px}
@media (max-width: 640px){.header-inner{grid-template-columns:auto 1fr auto;gap:8px}}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:28px;height:28px;border-radius:8px;background:radial-gradient(16px 16px at 20% 20%, var(--accent), transparent 40%), radial-gradient(22px 22px at 80% 80%, var(--primary), transparent 40%), linear-gradient(135deg, var(--primary), var(--accent))}
.brand .title{font-weight:800;letter-spacing:.3px}
.brand img{height:48px;border-radius:0;object-fit:contain}

/* Header regions */
.header-left{justify-self:start}
.header-center{justify-self:center;text-align:center}
.header-right{justify-self:end;display:flex;gap:8px}
.header .title{font-weight:800;letter-spacing:.3px;font-size:18px}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 720px){.grid-2,.grid-3{grid-template-columns:1fr}}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(148,163,184,.15);font-size:14px;vertical-align:middle}
.table th{color:var(--muted);font-weight:600;text-align:left}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Ensure inner content doesn't wrap unexpectedly when scrolling horizontally */
.table-wrap .table{min-width:1000px}
/* Logs table: keep all cells on one line; use horizontal scroll to view */
#tab-content-logs .table th,
#tab-content-logs .table td{white-space:nowrap}
/* Live table: same behavior as logs */
#tab-content-live .table th,
#tab-content-live .table td{white-space:nowrap}
.code{padding:6px 8px;border-radius:6px;background:rgba(148,163,184,.15);white-space:nowrap;display:inline-block;min-width:fit-content;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px}
/* Ensure table inputs don't get cut off */
.table .input{min-width:120px;width:100%}

/* iOS zoom avoidance on inputs and better tap handling */
@media (max-width: 768px){
    html{font-size:16px}
    input, select, textarea, button{font-size:16px}
    body{-webkit-text-size-adjust:100%}
}

/* Improve grid and table usability on tablets */
@media (max-width: 1024px){
    .grid-3{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.code-container{display:flex;align-items:center;gap:8px;justify-content:space-between}
/* Professional copy button */
.btn-copy{padding:6px;background:transparent;border:1px solid rgba(148,163,184,.25);color:var(--muted);border-radius:6px;cursor:pointer;box-shadow:none;opacity:.7;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px}
.btn-copy:hover{background:rgba(233,30,99,.08);opacity:1;border-color:rgba(233,30,99,.35);color:#fda4af}
.btn-copy svg{flex-shrink:0}
.otp{display:flex;align-items:center;gap:8px}
.otp .label{margin:0;color:var(--muted);font-size:12px}
.otp .otp-code{padding:4px 6px;border-radius:6px;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.18)}
.otp .otp-timer{opacity:.7;font-size:12px}
.btn-toggle{padding:4px 8px;font-size:11px;border-radius:4px;cursor:pointer;border:1px solid;transition:all 0.2s ease}
.btn-toggle.active{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25);color:#34d399}
.btn-toggle.inactive{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);color:#f87171}
.btn-toggle:hover{opacity:0.9}

/* Activation count styling */
.activation-count{
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	background: rgba(148,163,184,.08);
	border: 1px solid rgba(148,163,184,.15);
	color: var(--text);
}
.activation-count.warning{
	background: rgba(245,158,11,.12);
	border-color: rgba(245,158,11,.25);
	color: #fbbf24;
}

.navtabs{display:flex;gap:6px;border-bottom:1px solid rgba(148,163,184,.12);padding:8px}
.tab{padding:6px 10px;border-radius:6px;color:var(--muted);cursor:pointer;font-size:14px;transition:all 0.2s ease}
.tab.active{background:rgba(233,30,99,.12);color:var(--text);border:1px solid rgba(233,30,99,.2)}
.tab:hover:not(.active){background:rgba(148,163,184,.05)}

.toast{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));background:#0b1220;border:1px solid rgba(148,163,184,.2);color:#fff;padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}

/* Mobile-friendly table cell spacing */
@media (max-width: 680px){
	.table th,.table td{padding:8px}
	.btn{padding:9px 12px}
}

/* Theme variants */
:root[data-theme="dark"]{
	--bg:#0a0f1a; --panel:#0e1626; --muted:#9aa6b2; --text:#f1f5f9; --primary:#f97316; --primary-600:#ea580c; --accent:#1e40af; --ring: rgba(249,115,22,.35);
}
:root[data-theme="light"]{
	--bg:#f6f7fb; --panel:#ffffff; --muted:#475569; --text:#0f172a; --primary:#f97316; --primary-600:#ea580c; --accent:#1e3a8a; --ring: rgba(249,115,22,.25);
}

/* Roel Breman branding accents (orange + dark blue + black) */
body{background:radial-gradient(1200px 600px at 80% -10%, rgba(30,64,175,.22), transparent 60%), radial-gradient(1000px 800px at -10% 110%, rgba(249,115,22,.18), transparent 60%), var(--bg)}

/* Header brand logo */
.brand .logo{background:radial-gradient(16px 16px at 20% 20%, var(--accent), transparent 40%), radial-gradient(22px 22px at 80% 80%, var(--primary), transparent 40%), linear-gradient(135deg, var(--primary), var(--accent))}

/* Password toggle button styling */
.password-toggle-btn{
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.password-toggle-btn:hover{
	color: var(--text);
	background: rgba(148,163,184,.08);
}

.password-toggle-btn:active{
	transform: translateY(-50%) scale(0.95);
}

.password-icon{
	width: 18px;
	height: 18px;
	transition: all 0.2s ease;
}

/* Copy button near inputs */
.btn-inline{
	position:absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	padding:6px 8px;
	font-size:12px;
	background:transparent;
	border:1px solid rgba(148,163,184,.25);
	color:var(--muted);
	border-radius:6px;
	cursor:pointer;
	transition:all .2s ease;
}
.btn-inline:hover{ background:rgba(148,163,184,.08); color:var(--text); border-color:rgba(148,163,184,.35) }

/* Light/dark card adjustments */
:root[data-theme="light"] .card{background:#fff;border-color:rgba(15,23,42,.08);box-shadow:0 10px 30px rgba(15,23,42,.08)}

/* Inputs light variant */
:root[data-theme="light"] .input{background:#fff;border-color:rgba(15,23,42,.15)}

/* Buttons light variant */
:root[data-theme="light"] .btn-ghost{color:var(--text);border-color:rgba(15,23,42,.15)}

/* Password toggle light variant */
:root[data-theme="light"] .password-toggle-btn:hover{
	background: rgba(15,23,42,.05);
}

/* API Documentation Styles */
/* Ensure consistent inner spacing for all tab sections */
.card-body > section{
	padding: 0;
}

/* Consistent styling for all tab content sections */
.tab-content-section {
	padding: 20px;
}

.tab-content-section h2 {
	margin-top: 0;
	margin-bottom: 20px;
}

/* Specifieke styling voor de licentie- en gebruikerssecties om consistentie te creëren */
#tab-content-licenses h2:first-child,
#tab-content-admins h2:first-child {
	margin-top: 0;
}

.tab-content-section h3 {
	margin-top: 24px;
	margin-bottom: 16px;
}

.api-intro{
	color: var(--muted);
	margin-bottom: 24px;
	line-height: 1.6;
}

.api-section{
	margin-bottom: 32px;
}

.api-section h3{
	color: var(--text);
	font-size: 18px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(148,163,184,.15);
}

.endpoint{
	background: rgba(15,23,42,.4);
	border: 1px solid rgba(148,163,184,.15);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

.endpoint-header{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.method{
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	min-width: 60px;
	text-align: center;
}

.method.get{background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.25)}
.method.post{background: rgba(233,30,99,.15); color: #fda4af; border: 1px solid rgba(233,30,99,.25)}
.method.put{background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.25)}
.method.patch{background: rgba(168,85,247,.15); color: #c4b5fd; border: 1px solid rgba(168,85,247,.25)}
.method.delete{background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.25)}

.url{
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	background: rgba(148,163,184,.1);
	padding: 4px 8px;
	border-radius: 4px;
	color: var(--text);
	font-size: 14px;
}

.description{
	color: var(--muted);
	margin-bottom: 12px;
	line-height: 1.5;
}

.request-body, .response{
	margin-top: 12px;
}

.request-body strong, .response strong{
	color: var(--text);
	font-size: 13px;
	display: block;
	margin-bottom: 6px;
}

.request-body pre, .response pre, .auth-example pre{
	background: rgba(0,0,0,.3);
	border: 1px solid rgba(148,163,184,.15);
	border-radius: 8px;
	padding: 12px;
	margin: 0;
	overflow-x: auto;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	font-size: 13px;
	line-height: 1.4;
}

.request-body code, .response code, .auth-example code{
	background: none;
	padding: 0;
	color: #e2e8f0;
}

.auth-example{
	margin-top: 12px;
}

.status-codes{
	list-style: none;
	padding: 0;
	margin: 12px 0 0 0;
}

.status-codes li{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	padding: 8px 12px;
	background: rgba(15,23,42,.3);
	border-radius: 6px;
	border: 1px solid rgba(148,163,184,.1);
}

.status-code{
	background: rgba(59,130,246,.15);
	color: #93c5fd;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	font-size: 12px;
	font-weight: 600;
	min-width: 40px;
	text-align: center;
}

/* Light theme adjustments for API docs */
:root[data-theme="light"] .endpoint{
	background: rgba(255,255,255,.6);
	border-color: rgba(15,23,42,.1);
}

:root[data-theme="light"] .request-body pre, 
:root[data-theme="light"] .response pre, 
:root[data-theme="light"] .auth-example pre{
	background: rgba(15,23,42,.05);
	border-color: rgba(15,23,42,.1);
}

:root[data-theme="light"] .request-body code, 
:root[data-theme="light"] .response code, 
:root[data-theme="light"] .auth-example code{
	color: #0f172a;
}

/* Additional API Docs styling */
.api-intro{
	color: var(--muted);
	margin-bottom: 24px;
	line-height: 1.6;
}

.plugin-note{
	background: rgba(30,64,175,.1);
	border: 1px solid rgba(30,64,175,.2);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 16px;
	color: var(--text);
	font-size: 14px;
}

.plugin-note code{
	background: rgba(30,64,175,.2);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	font-size: 12px;
}

.auth-types{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 16px;
}

.auth-type{
	background: rgba(15,23,42,.4);
	border: 1px solid rgba(148,163,184,.15);
	border-radius: 12px;
	padding: 16px;
}

.auth-type h4{
	color: var(--text);
	font-size: 16px;
	margin: 0 0 8px 0;
}

.auth-type p{
	color: var(--muted);
	margin: 0 0 12px 0;
	font-size: 14px;
}

@media (max-width: 768px) {
	.auth-types{
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

:root[data-theme="light"] .status-codes li{
	background: rgba(255,255,255,.5);
	border-color: rgba(15,23,42,.1);
}

/* Downloads page - professional layout */
#tab-content-downloads .download-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.btn.btn-lg{padding:12px 18px;font-size:15px;border-radius:10px}
#tab-content-downloads .download-title{font-size:16px;font-weight:700}
#tab-content-downloads .download-sub{color:var(--muted);margin-top:4px;word-break:break-all}
#tab-content-downloads .download-meta{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;margin-top:8px}
@media (max-width: 720px){#tab-content-downloads .download-meta{grid-template-columns:repeat(2, minmax(0,1fr))}}
#tab-content-downloads .meta-item{background:rgba(148,163,184,.06);border:1px solid rgba(148,163,184,.15);border-radius:10px;padding:12px}
#tab-content-downloads .meta-item .label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
#tab-content-downloads .meta-item .value{font-weight:600;word-break:break-all}
#tab-content-downloads .download-help{margin-top:16px;color:var(--muted);font-size:13px}

:root[data-theme="light"] #tab-content-downloads .meta-item{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.1)}

/* Manuals grid styling */
.manuals-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.manual-card {
	background: var(--panel);
	border: 1px solid rgba(148,163,184,.18);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
	transition: all 0.2s ease;
}

.manual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    border-color: rgba(233,30,99,.3);
}

.manual-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.manual-title {
	font-weight: 600;
	font-size: 16px;
	color: var(--text);
	flex: 1;
	margin-right: 8px;
}

.manual-meta {
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}

.manual-card-body {
	margin-bottom: 16px;
}

.manual-filename {
	font-size: 13px;
	color: var(--muted);
	word-break: break-all;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	background: rgba(148,163,184,.06);
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid rgba(148,163,184,.1);
}

.manual-card-footer {
	display: flex;
	justify-content: flex-end;
}

.btn-sm {
	padding: 6px 10px;
	font-size: 13px;
	border-radius: 6px;
}

/* Light theme adjustments for manuals */
:root[data-theme="light"] .manual-card {
	background: #fff;
	border-color: rgba(15,23,42,.1);
	box-shadow: 0 4px 12px rgba(15,23,42,.08);
}

:root[data-theme="light"] .manual-card:hover {
	box-shadow: 0 6px 16px rgba(15,23,42,.12);
	border-color: rgba(59,130,246,.2);
}

:root[data-theme="light"] .manual-filename {
	background: rgba(15,23,42,.04);
	border-color: rgba(15,23,42,.1);
}

/* Status cards */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:16px}
.status-card{background:var(--panel);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:16px}
.status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.status-title{font-weight:700}
.status-indicator{width:10px;height:10px;border-radius:50%;border:1px solid rgba(148,163,184,.3);background:rgba(148,163,184,.2);box-shadow:0 0 0 4px rgba(148,163,184,.08)}
.status-indicator.ok{background:rgba(16,185,129,.9);border-color:rgba(16,185,129,.8);box-shadow:0 0 0 6px rgba(16,185,129,.15)}
.status-indicator.bad{background:rgba(239,68,68,.9);border-color:rgba(239,68,68,.8);box-shadow:0 0 0 6px rgba(239,68,68,.15)}
.status-indicator.warn{background:rgba(245,158,11,.95);border-color:rgba(245,158,11,.8);box-shadow:0 0 0 6px rgba(245,158,11,.18)}
.blink{animation:blinkPulse 1s ease-in-out infinite}
@keyframes blinkPulse{0%{transform:scale(1);filter:none}50%{transform:scale(1.15);filter:brightness(1.25)}100%{transform:scale(1);filter:none}}
.status-body{display:grid;gap:8px}
.kv{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kv span{color:var(--muted);font-size:12px}
.kv code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.15);border-radius:6px;padding:3px 6px}
.status-actions{margin-top:12px}

/* Light theme adjustments for status */
::root[data-theme="light"] .status-card{background:#fff;border-color:rgba(15,23,42,.1)}
::root[data-theme="light"] .kv code{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.1)}

/* Modal */
.modal-backdrop{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 60;
}
.modal-backdrop.show{ display:flex }
.modal{
	background: var(--panel);
	border: 1px solid rgba(148,163,184,.18);
	border-radius: 12px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.modal-header{ padding:16px 16px 8px 16px; border-bottom:1px solid rgba(148,163,184,.12) }
.modal-title{ font-weight:700 }
.modal-body{ padding:16px }
.modal-footer{ padding:12px 16px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid rgba(148,163,184,.12) }
.muted{ color: var(--muted); font-size:12px }

/* Light theme modal tweaks */
::root[data-theme="light"] .modal{ background:#fff; border-color:rgba(15,23,42,.1) }
::root[data-theme="light"] .modal-header{ border-bottom-color: rgba(15,23,42,.1) }
::root[data-theme="light"] .modal-footer{ border-top-color: rgba(15,23,42,.1) }

/* Progress bars */
.progress{position:relative;width:100%;height:10px;background:rgba(148,163,184,.15);border:1px solid rgba(148,163,184,.25);border-radius:999px;overflow:hidden}
.progress>.bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg, var(--primary), var(--accent));transition:width .15s ease}
.progress-sm{height:6px}
.progress-info{margin-top:6px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:8px}

/* Light theme progress */
:root[data-theme="light"] .progress{background:rgba(15,23,42,.08);border-color:rgba(15,23,42,.12)}

/* Form fields layout - vertical stacking with wider fields */
.form-fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.field-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field-group .label {
	margin: 0;
	font-weight: 500;
	color: var(--text);
}

/* Input with actions - field and buttons side by side */
.input-with-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.input-with-actions .input {
	flex: 1;
	min-width: 0;
}

.field-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* File display for manual upload */
.file-display {
	flex: 1;
	padding: 12px;
	border: 1px solid rgba(148,163,184,.25);
	border-radius: 12px;
	background: rgba(15,23,42,.6);
	color: var(--muted);
	font-size: 13px;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Password toggle button adjustments for new layout */
.input-with-actions .password-toggle-btn {
	position: static;
	top: auto;
	right: auto;
	transform: none;
}

/* Modal width adjustments for wider fields */
.modal {
	max-width: 500px;
}

/* Light theme adjustments */
:root[data-theme="light"] .file-display {
	background: #fff;
	border-color: rgba(15,23,42,.15);
	color: var(--muted);
}

/* Footer */
.footer{border-top:1px solid rgba(148,163,184,.12);background:rgba(2,6,23,.8);backdrop-filter:blur(8px);margin-top:24px}
.footer-inner{display:flex;align-items:center;justify-content:center;padding:16px}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--muted)}
.footer-logo{height:18px;width:auto;border-radius:4px}
.footer-text{font-size:12px;color:var(--muted);text-decoration:none}
.footer-text:hover{text-decoration:underline;color:var(--text)}