:root{
	--page-padding: clamp(10px, 2vw, 28px);
	--widget-bg: #fafafa;
	--cell-bg: #fff;
	--muted: #666;
	--border: rgba(0,0,0,0.9);
	--nbs-link-bg: rgba(0,0,0,0.9);
	--nbs-link-fg: rgba(255,255,255,0.9);
}
*{box-sizing:border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;}
html{font-family:Arial,Helvetica,sans-serif; font-size: clamp(14px, 2.2vw, 26px); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{margin:0; padding:var(--page-padding); background:var(--widget-bg); color:#222; min-height:100vh; display:flex; flex-direction:column; align-items:stretch;}

h1{font-size: clamp(14px, 2.2vw, 24px); margin:0 0 15px 0}

.wrapper{max-width:1200px; margin:auto; width:100%; position: relative;}

.result{font-size: clamp(12px, 2.2vw, 20px); margin-top:12px; padding:clamp(10px,1.6vw,18px); border:1px solid var(--border); border-radius:8px; background:transparent}
.item-header{margin:6px 0;padding:0; font-size: clamp(12px, 2.2vw, 20px)}
.item{margin:6px 0;padding:0; font-size: clamp(8px, 2.2vw, 16px)}
.error{color:#b00}

label.selector{display:block; margin:8px 0 6px 0; font-size: clamp(12px, 2.2vw, 20px);}
select{
	padding:8px 10px;
	width:100%;
	font-size: clamp(12px, 2.2vw, 24px);
	font-weight: 600;
	border-radius:6px;
	border:1px solid var(--border);
	/* use the cell background and inherit text color so nightmode applies */
	background: var(--cell-bg);
	color: inherit;
}

/* Responsive rows & cards */
/* Default: allow wrapping but use a smaller flexible min-width */
.row { display:flex; gap:clamp(8px,1.6vw,16px); margin:8px 0; flex-wrap:wrap; align-items:stretch; }
/* reduce the cell base size so more cells fit on a single row */
.cell { flex:1 1 min(120px, 28%); background:var(--cell-bg); padding:clamp(8px,1.6vw,14px); border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; justify-content:center; min-width:120px; max-width:320px; }
.cell .label { display:block; font-size:clamp(12px, 2.2vw, 20px); color:var(--muted); margin-bottom:6px; }
.cell .value { font-weight:700; font-size: clamp(12px, 2.2vw, 20px); line-height:1; }

/* Bar styles for rows */
.bar { width:100%; height: clamp(45px, 1.2vw, 12px); border-radius: 999px; overflow:hidden; display:flex; align-items:center; background:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02)); margin-bottom:8px; }
.segment { height:100%; display:block; position:relative; }
.segment .seg-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:1.3em; color:rgba(255,255,255,0.95); font-weight:700; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,0.4); pointer-events:none; }
/* fallback when segment too narrow: show label outside */
.segment.small .seg-label { display:none; }
.seg-outside { 
    font-size: clamp(13px, 1.4vw, 16px); /* increased from 11px,1.2vw,12px */
    color: var(--muted); 
    margin-top: 6px; 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
}

/* small screens: keep each row as a single horizontal line with scroll if needed */
@media (max-width:640px) {
	.row { flex-direction:row; flex-wrap:nowrap; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
	.cell { flex:0 0 110px; width:110px; min-width:110px; max-width:120px; }
	.cell .label { font-size:12px; }
	.cell .value { font-size:16px; }
	.wrapper{ padding:0 }
}

/* large screens: slightly larger spacing */
@media (min-width:1200px) {
	:root{ --page-padding:32px; }
	.cell { padding:18px; }
}

/* NBS badge (fixed bottom-right) */
#nbs-link{
	display:inline-flex;
	align-items:center;
	gap:0.6rem;
	padding:0.35rem 0.6rem;
	border-radius:999px;
	background:var(--nbs-link-bg);
	box-shadow:0 6px 18px rgba(0,0,0,0.08);
	text-decoration:none;
	color: inherit;
	z-index:9999;
	transition:transform .14s ease, box-shadow .14s ease;
	backdrop-filter: blur(4px);
}

/* Logo inside badge */
#nbs-logo{
	width:clamp(20px, 2.6vw, 36px);
	height:auto;
	display:block;
	object-fit:contain;
}

/* Text next to logo */
.nbs-text{
	font-weight:600;
	font-size:clamp(12px,1.4vw,14px);
	white-space:nowrap;
	color:var(--nbs-link-fg);
}

/* Hover/focus */
#nbs-link:hover,
#nbs-link:focus{
	transform:translateY(-3px);
	box-shadow:0 10px 28px rgba(0,0,0,0.14);
	outline: none;
}

/* Make sure badge is compact on very small screens */
@media (max-width:420px){
	#nbs-link{ padding:0.25rem 0.45rem; }
	.nbs-text{ font-size:12px; display:none; } /* hide text on very small screens if space limited */
	#nbs-logo{ width:26px; }
}

/* Disclaimer (fixed bottom-left) */
#disclaimer{
	display:inline-flex;
	align-items:center;
	gap:0.6rem;
	padding:0.35rem 0.6rem;
	border-radius:999px;
	color:var(--muted);
	font-size:13px;
	z-index:9999;
	cursor:default;
	transition:all .14s ease;
	max-width:120px;
	overflow:visible;
}

/* title visible by default */
.disclaimer-title{ font-weight:700; white-space:nowrap; }

/* hidden long text (revealed on title hover/focus or when .open class is set) */
.disclaimer-text{
	display:none;
	position:absolute;
	left:calc(100% + 10px);
	bottom:0;
	width:320px;
	max-width: calc(100vw - 115px);
	background:var(--cell-bg);
	color:var(--muted);
	border-radius:8px;
	padding:12px;
	box-shadow:0 4px rgba(0,0,0,0.12);
	border:1px solid var(--border);
	font-size:13px;
	line-height:1.3;
}

/* show when user hovers/focuses the title element, or when JS sets .open */
#disclaimer .disclaimer-title:hover + .disclaimer-text,
#disclaimer .disclaimer-title:focus + .disclaimer-text,
#disclaimer.open .disclaimer-text {
	display:block;
}

/* ensure the title remains readable when expanded */
#disclaimer:hover, #disclaimer:focus-within {
	transform:translateY(-2px);
}

/* Section divider used between groups */
.section-divider {
	border: none;
	height: 1px;
	background: var(--border);
	margin: 10px 0;
	border-radius: 1px;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 0;
    z-index: 9999;
    padding: 0.5%;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

:not(:hover)::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
}