:root{
	/* Theme tokens (dark, glassy, high readability) */
	--bg0:#050913;
	--bg1:#0b1224;
	--text:rgba(242,246,255,.96);
	--muted:rgba(242,246,255,.70);
	--glass:rgba(255,255,255,.075);
	--glass2:rgba(255,255,255,.10);
	--stroke:rgba(255,255,255,.12);
	--stroke2:rgba(255,255,255,.18);
	--shadow:0 12px 34px rgba(0,0,0,.42);
	--shadow2:0 8px 20px rgba(0,0,0,.34);
	--radius:16px;
	--ring:0 0 0 3px rgba(120,160,255,.20);
	--danger:rgba(255,92,92,.92);
	--ok:rgba(92,255,190,.92);
	--warn:rgba(255,200,92,.92);
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme: dark}
body{
	margin:0;
	color:var(--text);
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	background: radial-gradient(1200px 650px at 18% 12%, rgba(120,160,255,.14), transparent 60%),
						radial-gradient(980px 560px at 82% 30%, rgba(200,120,255,.10), transparent 62%),
						linear-gradient(180deg,var(--bg0),var(--bg1));
}

body:before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
	opacity:.25;
	mix-blend-mode:overlay;
}

a{color:inherit}
a:not(.btn):not(.tab):not(.brand){text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
a:not(.btn):not(.tab):not(.brand):hover{text-decoration-color:rgba(255,255,255,.55)}

::selection{background:rgba(120,160,255,.28);color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:22px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.spacer{height:14px}
.right{margin-left:auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

h1,h2,h3{line-height:1.15}
p{margin:0 0 10px 0;line-height:1.45}
ul,ol{margin:0 0 10px 18px}
small{color:var(--muted)}

.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-title{margin:0;font-size:20px;font-weight:800;letter-spacing:.2px}
.page-subtitle{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.35}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

.glass{
	background:var(--glass);
	border:1px solid var(--stroke);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass{background: rgba(20,26,42,.92)}
}

.glass-card{padding:18px}
.glass-header{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.2px}
.muted{color:var(--muted)}

/* Topbar polish */
.topbar .row{align-items:center}
.topbar .chip{background:rgba(255,255,255,.045)}
.topbar .btn{padding:9px 12px}
.topbar .btn-primary{background:rgba(120,160,255,.18);border-color:rgba(120,160,255,.30)}
.topbar .btn-primary:hover{background:rgba(120,160,255,.22)}

@media (max-width: 900px){
	.topbar{align-items:flex-start}
	.topbar .brand{flex:1 1 100%}
	.topbar .row{flex:1 1 100%;justify-content:flex-start}
}

.hint{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--muted);font-size:13px;line-height:1.35}
.empty{color:var(--muted);font-size:13px;padding:6px 0}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 14px;
	border:1px solid var(--stroke2);background:rgba(255,255,255,.06);color:var(--text);text-decoration:none;cursor:pointer}
.btn{transition: background .12s ease, border-color .12s ease, transform .12s ease, opacity .12s ease}
.btn:hover{background:rgba(255,255,255,.10)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring);border-color:rgba(120,160,255,.45)}
.btn-primary{background:rgba(120,160,255,.22);border-color:rgba(120,160,255,.35)}
.btn-danger{background:rgba(255,92,92,.14);border-color:rgba(255,92,92,.28)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.10)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}

button.btn[disabled], a.btn[aria-disabled="true"], .btn[disabled]{opacity:.55;cursor:not-allowed}
button.btn[disabled]:active{transform:none}

.input, textarea, select{
	width:100%;
	border-radius:14px;
	padding:10px 12px;
	color:var(--text);
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.06);
	outline:none;
	transition: box-shadow .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}
.input:hover, textarea:hover, select:hover{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.075)}
.input:focus, textarea:focus, select:focus{box-shadow:var(--ring);border-color:rgba(120,160,255,.45)}
input[disabled], textarea[disabled], select[disabled]{opacity:.55;cursor:not-allowed}

.input::placeholder, textarea::placeholder{color:rgba(242,246,255,.50)}

input[type="checkbox"], input[type="radio"]{accent-color:rgba(120,160,255,.85)}

/* Windows/Chromium can render the dropdown list with a light background;
   ensure option text stays readable by matching our dark theme. */
select option, select optgroup{
	background-color:var(--bg1);
	color:var(--text);
}
select option:disabled{color:var(--muted)}

/* Form labels (avoid overriding flex labels like <label class="row"> or button-like labels) */
label:not(.row):not(.btn){display:block;margin:10px 0 6px;color:var(--muted);font-size:13px;font-weight:650;letter-spacing:.15px}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;
	background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);line-height:1.1}
.badge-ok{background:rgba(92,255,190,.12);border-color:rgba(92,255,190,.24)}
.badge-warn{background:rgba(255,200,92,.12);border-color:rgba(255,200,92,.24)}
.badge-danger{background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.24)}

.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 10px;
	background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);font-size:12px;line-height:1.1}

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

.kanban{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap:14px}
@media (max-width:1100px){.kanban{grid-template-columns: repeat(2,minmax(0,1fr))}}
@media (max-width:650px){.kanban{grid-template-columns: 1fr}}

.column{min-height:160px}
.column h3{margin:0 0 10px 0;font-size:14px;color:var(--muted);font-weight:650;letter-spacing:.3px}
.card{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:grab;transition: background .12s ease, border-color .12s ease, transform .12s ease}
.card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.card:active{transform:translateY(1px)}
.card .title{font-weight:650;margin-bottom:6px}
.card .meta{font-size:12px;color:var(--muted)}

.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tab{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);text-decoration:none}
.tab.active{background:rgba(120,160,255,.18);border-color:rgba(120,160,255,.32)}
.tab{transition: background .12s ease, border-color .12s ease}
.tab:hover{background:rgba(255,255,255,.06)}
.tab:focus-visible{outline:none;box-shadow:var(--ring);border-color:rgba(120,160,255,.45)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:13px;vertical-align:top;line-height:1.35}
.table thead th{color:var(--muted);font-weight:750;font-size:12px;letter-spacing:.25px;background:rgba(255,255,255,.03)}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.012)}

.flash{
	padding:11px 12px;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.12);
	background:rgba(255,255,255,.06);
	line-height:1.35;
	box-shadow:0 10px 24px rgba(0,0,0,.22);
	position:relative;
}
.flash:before{content:"";position:absolute;left:10px;top:10px;bottom:10px;width:3px;border-radius:6px;background:rgba(255,255,255,.14)}
.flash{padding-left:20px}

.flash-error{border-color:rgba(255,92,92,.22);background:rgba(255,92,92,.10)}
.flash-error:before{background:rgba(255,92,92,.55)}

.flash-ok{border-color:rgba(92,255,190,.22);background:rgba(92,255,190,.09)}
.flash-ok:before{background:rgba(92,255,190,.55)}

.split{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.split > *{flex:1 1 260px}

hr{border:0;border-top:1px solid rgba(255,255,255,.10);margin:16px 0}

/* Small consistency tweaks */
.spacer{height:16px}
.muted b{color:rgba(242,246,255,.88)}

/* Improve readability in dense pages */
.glass-card > *:last-child{margin-bottom:0}

pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12.5px;line-height:1.45}

/* My Day: reduce nested-card heaviness */
body[data-page="my-day"] .glass.glass-card{padding:16px}
body[data-page="my-day"] .work-card{box-shadow:var(--shadow2);background:rgba(255,255,255,.055)}
body[data-page="my-day"] .work-card .btn{padding:9px 12px}
body[data-page="my-day"] .hint{padding:9px 11px;border-radius:14px}

body[data-page="my-day"] .work-card .work-title{font-size:17px;font-weight:800;letter-spacing:.15px;line-height:1.15}
body[data-page="my-day"] .work-card .work-meta{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.35}
body[data-page="my-day"] .work-card .work-actions{min-width:120px}
body[data-page="my-day"] .work-card .badge{backdrop-filter: blur(10px) saturate(140%);-webkit-backdrop-filter: blur(10px) saturate(140%)}

/* OP detail: clearer header + tabs */
body[data-page="op"] .tabs{gap:8px}
body[data-page="op"] .tab{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.11)}
body[data-page="op"] .tab.active{background:rgba(120,160,255,.20);border-color:rgba(120,160,255,.34)}
body[data-page="op"] .tab:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}

/* OP detail: make dense helper lines easier to scan */
body[data-page="op"] .muted{line-height:1.45}
body[data-page="op"] .chip{border-color:rgba(255,255,255,.12)}

/* OP detail: tables often carry the truth—make them slightly crisper */
body[data-page="op"] .table th, body[data-page="op"] .table td{padding:10px 12px}

/* OP detail: dense tables + long text blocks */
body[data-page="op"] .table{border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden}
body[data-page="op"] .table thead th{background:rgba(255,255,255,.035)}
body[data-page="op"] .table tbody tr:hover{background:rgba(255,255,255,.04)}
body[data-page="op"] .table td .btn{padding:8px 12px}

body[data-page="op"] pre,
body[data-page="op"] pre.mono{
	background:rgba(255,255,255,.035);
	border:1px solid rgba(255,255,255,.08);
	border-radius:14px;
	padding:10px 12px;
	margin:0;
}

body[data-page="op"] .table pre,
body[data-page="op"] .table pre.mono{background:transparent;border:0;padding:0}

/* OP header: versions + status change controls */
body[data-page="op"] .page-actions .row{align-items:center;gap:10px}
body[data-page="op"] .page-actions select{min-height:40px}

/* Audit: denser table, better wrapping + column sizing */
body[data-page="audit"] .table{border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;table-layout:fixed}
body[data-page="audit"] .table th, body[data-page="audit"] .table td{padding:10px 12px}
body[data-page="audit"] .table thead th{background:rgba(255,255,255,.035)}

body[data-page="audit"] .audit-table{overflow:auto}
body[data-page="audit"] .audit-table .table{min-width:1120px}

body[data-page="audit"] .table th:nth-child(1), body[data-page="audit"] .table td:nth-child(1){width:120px}
body[data-page="audit"] .table th:nth-child(2), body[data-page="audit"] .table td:nth-child(2){width:280px}
body[data-page="audit"] .table th:nth-child(3), body[data-page="audit"] .table td:nth-child(3){width:150px}
body[data-page="audit"] .table th:nth-child(4), body[data-page="audit"] .table td:nth-child(4){width:170px}
body[data-page="audit"] .table th:nth-child(5), body[data-page="audit"] .table td:nth-child(5){width:150px}
body[data-page="audit"] .table th:nth-child(6), body[data-page="audit"] .table td:nth-child(6){width:150px}

body[data-page="audit"] .audit-when{white-space:nowrap}
body[data-page="audit"] .audit-op-code{font-weight:850;letter-spacing:.15px}
body[data-page="audit"] .audit-op-title{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="audit"] .audit-details{white-space:normal;word-break:break-word}

body[data-page="op"] [aria-label="Versões"] .btn{padding:9px 12px}
body[data-page="op"] [aria-label="Versões"] .badge{padding:3px 8px;font-size:11.5px}