/*
 * InHand — shared design tokens & components.
 * Apple Human Interface Guidelines, LIGHT theme only.
 * Every rounded corner uses corner-shape: squircle (progressive enhancement;
 * browsers without support fall back to border-radius).
 */
:root {
	color-scheme: light;
	--bg: #f5f5f7;
	--fg: #1d1d1f;
	--fg-2: #6e6e73;
	--fg-3: #86868b;
	--fg-4: #a1a1a6;
	--danger: #ff3b30;
	--ok-bg: #e5f5e8;
	--ok-fg: #1d7a33;
	--brand: #e43d30;
	--hairline: rgba(0, 0, 0, 0.08);
	--input-bg: rgba(255, 255, 255, 0.5);
	--radius-md: 14px;
	--radius-lg: 2rem;
	--radius-pill: 999px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family:
		-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
		"PingFang SC", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
	letter-spacing: -0.01em;
}

/* ---- eSchool glass: translucent + blur + layered shadow + inset highlights */
.glass,
section,
.glass-btn,
.tile {
	position: relative;
	--base-shadow-width: 4px;
	background: rgba(255, 255, 255, 0.42);
	box-shadow:
		var(--base-shadow-width) 0px 0px calc(var(--base-shadow-width) * -0.6)
			#44444420,
		calc(var(--base-shadow-width) * -1) 0px 0px
			calc(var(--base-shadow-width) * -0.6) #44444420,
		0px 0px 0px calc(var(--base-shadow-width) * 0.3) #39393915,
		0px calc(var(--base-shadow-width) * 6.4) 36px rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--radius-lg);
	corner-shape: squircle;
}
.glass::after,
section::after,
.glass-btn::after,
.tile::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	corner-shape: squircle;
	overflow: hidden;
	opacity: 0.7;
	pointer-events: none;
	box-shadow:
		inset 0px 0px 16px 0px rgba(255, 255, 255, 0.3),
		inset 0px -6.4px 16px 0px rgba(255, 255, 255, 0.4),
		inset 0px 6.4px 16px 0px rgba(0, 0, 0, 0.02),
		inset 0px 0px 16px 0px rgba(255, 255, 255, 0.1);
}
.glass > *,
section > * {
	position: relative;
	z-index: 1;
}

/* ---- typography & text */
h2 {
	font-size: 15px;
	margin: 0 0 14px;
	font-weight: 600;
	letter-spacing: -0.018em;
}
p.muted {
	color: var(--fg-2);
	font-size: 13px;
	line-height: 1.7;
	margin: 0 0 12px;
}
label {
	display: block;
	font-size: 13px;
	color: var(--fg-2);
	margin: 10px 0 4px;
}
code {
	background: rgba(0, 0, 0, 0.06);
	border-radius: 5px;
	corner-shape: squircle;
	padding: 1px 5px;
	font-size: 12px;
	font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.mono {
	font-family: "SF Mono", ui-monospace, Menlo, monospace;
	font-size: 12px;
}
.err {
	color: var(--danger);
	font-size: 13px;
	min-height: 18px;
	margin-top: 10px;
}
.empty {
	color: var(--fg-3);
	font-size: 13px;
	padding: 12px 0 4px;
}

/* ---- inputs */
input,
select {
	width: 100%;
	background: var(--input-bg);
	border: 1px solid rgba(0, 0, 0, 0.07);
	color: var(--fg);
	border-radius: 12px;
	corner-shape: squircle;
	padding: 11px 14px;
	font-size: 14px;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}
input:focus,
select:focus {
	outline: none;
	border-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
input::placeholder {
	color: var(--fg-3);
}

/* ---- buttons */
button {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 12px;
	corner-shape: squircle;
	color: var(--fg);
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.05s ease;
}
button:hover {
	background: rgba(255, 255, 255, 0.85);
}
button:active {
	transform: scale(0.98);
}
button.primary {
	background: #1d1d1f;
	border-color: #1d1d1f;
	color: #ffffff;
}
button.primary:hover {
	background: #000000;
	border-color: #000000;
}
button.danger {
	color: var(--danger);
}
button.danger:hover {
	background: #fff0f0;
	border-color: var(--danger);
}
button.ghost {
	border-color: transparent;
	background: transparent;
	color: var(--fg);
	padding: 6px 10px;
}
button.ghost:hover {
	background: rgba(0, 0, 0, 0.06);
}
button.ghost.danger {
	color: var(--danger);
}
button.ghost.danger:hover {
	background: #fff0f0;
}
button:disabled {
	opacity: 0.5;
	cursor: default;
}

.row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.row input {
	flex: 1;
	min-width: 160px;
}

/* ---- tables */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 6px;
	table-layout: fixed;
}
th {
	text-align: left;
	font-weight: 600;
	color: var(--fg-2);
	font-size: 12px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--hairline);
	white-space: nowrap;
}
td {
	padding: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	vertical-align: top;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
tr:last-child td {
	border-bottom: none;
}
td .sub {
	display: block;
	font-size: 11px;
	color: var(--fg-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- badges */
.badge {
	display: inline-block;
	border-radius: var(--radius-pill);
	corner-shape: squircle;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 500;
	background: rgba(0, 0, 0, 0.06);
	color: var(--fg);
	white-space: nowrap;
}
.badge.ok {
	background: var(--ok-bg);
	color: var(--ok-fg);
}
.badge.warn {
	background: #fff8e6;
	color: #b25000;
}

/* ---- collapsible card heads (shared) */
.card-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	border-radius: 10px;
	corner-shape: squircle;
	padding: 4px 2px;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--fg);
	text-align: left;
	cursor: pointer;
}
.card-head:hover {
	background: rgba(0, 0, 0, 0.04);
}
.card-head .chev {
	margin-left: auto;
	font-size: 16px;
	line-height: 1;
	transition: transform 0.15s ease;
}
.card-head.open .chev {
	transform: rotate(90deg);
}
.card-body {
	min-width: 0;
}

details.sub-collapse {
	margin-top: 12px;
}
details.sub-collapse summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-2);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	user-select: none;
	padding: 8px 2px;
	transition: color 0.15s ease;
}
details.sub-collapse summary::-webkit-details-marker {
	display: none;
}
details.sub-collapse summary::after {
	content: "›";
	margin-left: auto;
	font-size: 15px;
	transition: transform 0.15s ease;
}
details.sub-collapse[open] summary::after {
	transform: rotate(90deg);
}
details.sub-collapse summary:hover {
	color: var(--fg);
}

/* ---- modal dialog (Create a Token) */
dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 460px;
	width: calc(100% - 32px);
}
dialog::backdrop {
	background: rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.dialog-inner {
	padding: 26px;
}