/*
 * AI Subscription Manager — Maximalist design system
 * Display: Sora (800/900) | Body: Inter | Data/meter readouts: JetBrains Mono
 * Sticker/badge accents: Caveat (handwritten, collage energy)
 */

:root {
	--aism-ink: #0B0B0F;
	--aism-paper: #FFF6E9;
	--aism-surface: #FFFFFF;
	--aism-pop-blue: #2B4CFF;
	--aism-pop-blue-ink: #0A1A66;
	--aism-pop-amber: #FFC93C;
	--aism-pop-amber-ink: #5C3D00;
	--aism-pop-coral: #FF5A36;
	--aism-pop-coral-ink: #5C1400;
	--aism-pop-mint: #00D89E;
	--aism-pop-mint-ink: #003D2C;
	--aism-pop-purple: #8B3DFF;
	--aism-pop-purple-ink: #2A0A66;
	--aism-pop-pink: #FF3D81;
	--aism-line: #0B0B0F;
	--aism-success: #0E9F6E;
	--aism-warn: #B45309;
	--aism-danger: #D6293E;
	--aism-shadow-hard: 7px 7px 0 var(--aism-line);
	--aism-shadow-hard-sm: 4px 4px 0 var(--aism-line);
	--aism-radius: 20px;
	--font-display: 'Sora', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-hand: 'Caveat', cursive;
}

.aism-maxi,
.aism-maxi * {
	box-sizing: border-box;
}

.aism-maxi {
	background-image: radial-gradient(var(--aism-line) 1.4px, transparent 1.4px);
	background-position: -8px -8px;
	background-size: 22px 22px;
	background-color: var(--aism-paper);
	border: 3px solid var(--aism-line);
	border-radius: 28px;
	color: var(--aism-ink);
	font-family: var(--font-body);
	margin: 28px 0;
	overflow: hidden;
	padding: 28px;
	position: relative;
}

.aism-eyebrow {
	background: var(--aism-ink);
	color: #fff;
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
	padding: 3px 10px;
	text-transform: uppercase;
	transform: rotate(-1deg);
}

/* ---------- Marquee ticker ---------- */

.aism-marquee {
	background: var(--aism-ink);
	border: 3px solid var(--aism-line);
	border-radius: 999px;
	box-shadow: var(--aism-shadow-hard-sm);
	margin: 0 0 26px;
	overflow: hidden;
	transform: rotate(-0.6deg);
}

.aism-marquee-track {
	animation: aism-scroll 26s linear infinite;
	display: flex;
	white-space: nowrap;
	width: max-content;
}

.aism-marquee-track span {
	color: var(--aism-pop-amber);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	padding: 12px 20px;
	text-transform: uppercase;
}

@keyframes aism-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Grid + cell base ---------- */

.aism-maxi-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(12, 1fr);
	position: relative;
}

.aism-maxi-cell {
	background: var(--aism-surface);
	border: 3px solid var(--aism-line);
	border-radius: var(--aism-radius);
	box-shadow: var(--aism-shadow-hard);
	min-width: 0;
	padding: 30px;
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tilt-left { transform: rotate(-1.1deg); }
.tilt-right { transform: rotate(1.1deg); }

.aism-maxi-cell:hover {
	box-shadow: 10px 10px 0 var(--aism-line);
	transform: translate(-2px, -2px) rotate(0deg);
}

/* Color variants — each bento/maximalist cell gets a saturated block color */

.is-color-a { background: var(--aism-pop-amber); color: var(--aism-pop-amber-ink); }
.is-color-b { background: var(--aism-pop-mint); color: var(--aism-pop-mint-ink); }
.is-color-c { background: var(--aism-pop-blue); color: #fff; }
.is-color-d { background: #fff; color: var(--aism-ink); }
.is-color-e { background: var(--aism-pop-coral); color: #fff; }

.is-color-a .aism-eyebrow,
.is-color-b .aism-eyebrow { background: var(--aism-ink); color: #fff; }
.is-color-c .aism-eyebrow,
.is-color-e .aism-eyebrow { background: #fff; color: var(--aism-ink); }

/* ---------- Plans grid ---------- */

.aism-plans-grid .aism-plan {
	background: var(--aism-surface);
	color: var(--aism-ink);
	display: flex;
	flex-direction: column;
	grid-column: span 4;
	text-align: left;
}

.aism-plan.is-color-a { background: #FFF1C4; }
.aism-plan.is-color-b { background: #D4FBEE; }
.aism-plan.is-color-c { background: #E4E9FF; }
.aism-plan.is-color-d { background: #FFFFFF; }
.aism-plan.is-color-e { background: #FFE3DB; }

.aism-plan.is-popular {
	background: var(--aism-pop-purple);
	color: #fff;
	transform: rotate(0deg) scale(1.02);
}

.aism-plan.is-popular:hover {
	transform: translate(-2px, -2px) rotate(0deg) scale(1.02);
}

.aism-sticker {
	background: var(--aism-pop-coral);
	border: 3px solid var(--aism-line);
	border-radius: 999px;
	box-shadow: var(--aism-shadow-hard-sm);
	color: #fff;
	left: 50%;
	padding: 10px 16px;
	position: absolute;
	top: -22px;
	transform: translateX(-50%) rotate(-4deg);
	z-index: 2;
}

.aism-sticker span {
	font-family: var(--font-hand);
	font-size: 1.3rem;
	font-weight: 700;
	white-space: nowrap;
}

.aism-sticker-admin { background: var(--aism-ink); left: 24px; top: -18px; transform: rotate(-6deg); }
.aism-sticker-locked { background: var(--aism-danger); }

.aism-ribbon {
	background: var(--aism-pop-amber);
	border: 2px solid var(--aism-line);
	border-radius: 6px;
	color: var(--aism-pop-amber-ink);
	font-family: var(--font-hand);
	font-size: 1.1rem;
	font-weight: 700;
	padding: 4px 12px;
	position: absolute;
	right: 16px;
	top: 16px;
	transform: rotate(4deg);
}

.aism-plan-head h3 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 6px 0 6px;
}

.aism-plan .aism-validity {
	color: rgba(11, 11, 15, 0.65);
	font-size: 0.9rem;
	margin: 0 0 18px;
}

.aism-plan.is-popular .aism-validity {
	color: rgba(255, 255, 255, 0.75);
}

.aism-price {
	align-items: baseline;
	display: flex;
	font-family: var(--font-display);
	gap: 6px;
	margin: 0 0 20px;
}

.aism-price span {
	font-size: 2.8rem;
	font-weight: 900;
	line-height: 1;
}

.aism-price em {
	color: rgba(11, 11, 15, 0.55);
	font-size: 0.95rem;
	font-style: normal;
}

.aism-plan.is-popular .aism-price em {
	color: rgba(255, 255, 255, 0.72);
}

.aism-plan ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.aism-plan li {
	align-items: flex-start;
	border-bottom: 2px dashed rgba(11, 11, 15, 0.15);
	display: flex;
	font-size: 0.95rem;
	gap: 10px;
	line-height: 1.4;
	padding: 10px 0;
}

.aism-plan.is-popular li {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.aism-plan li span {
	display: inline-block;
	flex-shrink: 0;
	font-weight: 800;
	width: 18px;
}

.aism-plan li.is-included span { color: var(--aism-success); }
.aism-plan.is-popular li.is-included span { color: #7CFFCF; }
.aism-plan li.is-excluded { color: rgba(11, 11, 15, 0.4); text-decoration: line-through; }
.aism-plan.is-popular li.is-excluded { color: rgba(255, 255, 255, 0.45); }
.aism-plan li.is-excluded span { color: var(--aism-danger); text-decoration: none; }

.aism-plan-note {
	color: rgba(11, 11, 15, 0.6);
	font-size: 0.82rem;
	margin: 10px 0 0;
	text-align: center;
}

.aism-plan.is-popular .aism-plan-note {
	color: rgba(255, 255, 255, 0.7);
}

.aism-subscribe-button,
.aism-danger {
	border: 3px solid var(--aism-line);
	border-radius: 12px;
	box-shadow: var(--aism-shadow-hard-sm);
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 800;
	padding: 13px 16px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.aism-subscribe-button {
	background: var(--aism-pop-amber);
	color: var(--aism-ink);
	font-size: 1rem;
	margin-top: auto;
	width: 100%;
}

.aism-plan.is-popular .aism-subscribe-button { background: #fff; }

.aism-subscribe-button:hover {
	box-shadow: 6px 6px 0 var(--aism-line);
	transform: translate(-2px, -2px);
}

.aism-subscribe-button:active {
	box-shadow: 2px 2px 0 var(--aism-line);
	transform: translate(1px, 1px);
}

.aism-subscribe-button:disabled,
.aism-subscribe-button.is-locked {
	background: #E4E4E4;
	box-shadow: var(--aism-shadow-hard-sm);
	color: rgba(11, 11, 15, 0.55);
	cursor: not-allowed;
}

.aism-subscribe-button.is-locked:hover {
	transform: none;
}

.aism-inline-cta {
	display: inline-block;
	margin-top: 18px;
	width: auto;
}

/* ---------- Fair usage strip ---------- */

.aism-usage-strip {
	background: var(--aism-ink);
	color: #fff;
	grid-column: 1 / -1;
}

.aism-usage-strip-head h4 {
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0;
}

.aism-usage-strip-note {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.88rem;
	margin: 8px 0 0;
	max-width: 60ch;
}

.aism-usage-strip-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-top: 18px;
}

.aism-usage-chip {
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	padding: 14px 16px;
}

.aism-usage-chip-name {
	color: rgba(255, 255, 255, 0.68);
	display: block;
	font-size: 0.82rem;
	margin-bottom: 6px;
}

.aism-usage-chip-meta {
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 600;
}

.aism-usage-chip-meta code {
	background: none;
	color: var(--aism-pop-amber);
	font-family: var(--font-mono);
	font-size: 1.1rem;
	font-weight: 700;
	padding: 0;
}

.aism-usage-chip-sep {
	color: rgba(255, 255, 255, 0.4);
	margin: 0 8px;
}

/* ---------- Dashboard grid ---------- */

.aism-dashboard-grid {
	grid-template-columns: repeat(12, 1fr);
}

.aism-plan-tile {
	grid-column: span 7;
	grid-row: span 2;
}

.aism-plan-tile h2 {
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 900;
	margin: 0 0 20px;
	overflow-wrap: anywhere;
}

.aism-plan-tile-meta {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin-bottom: 24px;
}

.aism-meta-label {
	color: rgba(11, 11, 15, 0.65);
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.aism-plan-tile-meta strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.aism-plan-tile code {
	background: rgba(11, 11, 15, 0.1);
	border: 2px solid var(--aism-line);
	border-radius: 6px;
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 3px 8px;
}

.aism-plan-tile-empty {
	line-height: 1.6;
	max-width: 46ch;
}

.aism-plan-tile-cancel {
	margin-top: 24px;
}

.aism-plan-tile .aism-danger {
	background: #fff;
}

.aism-plan-tile .aism-danger:hover {
	background: var(--aism-danger);
	color: #fff;
}

/* Usage meter tiles */

.aism-usage-tile {
	grid-column: span 5;
}

.aism-meter-readout {
	align-items: baseline;
	display: flex;
	font-family: var(--font-mono);
	gap: 4px;
}

.aism-meter-used {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1;
}

.aism-meter-sep {
	font-size: 1.4rem;
	opacity: 0.6;
}

.aism-meter-limit {
	font-size: 1.4rem;
	font-weight: 600;
	opacity: 0.6;
}

.aism-meter-track {
	background: rgba(11, 11, 15, 0.15);
	border: 2px solid var(--aism-line);
	border-radius: 999px;
	height: 12px;
	margin: 16px 0 12px;
	overflow: hidden;
	position: relative;
}

.aism-meter-fill {
	background: var(--aism-ink);
	height: 100%;
	transition: width 0.4s ease;
}

.aism-usage-tile.is-warn .aism-meter-fill { background: var(--aism-warn); }
.aism-usage-tile.is-full .aism-meter-fill { background: var(--aism-danger); }

.aism-meter-footnote {
	font-size: 0.85rem;
	margin: 0;
	opacity: 0.75;
}

/* Tables inside cells */

.aism-table-tile.aism-payments-tile { grid-column: span 7; }
.aism-table-tile.aism-invoices-tile { grid-column: span 5; }

.aism-table {
	border-collapse: collapse;
	table-layout: auto;
	width: 100%;
}

.aism-table th,
.aism-table td {
	border-bottom: 2px dashed rgba(11, 11, 15, 0.2);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
	padding: 10px 4px;
	text-align: left;
	vertical-align: top;
}

.aism-table th {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.aism-table a {
	color: var(--aism-pop-blue);
	font-weight: 700;
}

/* ---------- Usage lock panel (AI tool pages) ---------- */

.aism-maxi-lock {
	padding: 22px;
}

.aism-lock-panel {
	color: #fff;
	grid-column: 1 / -1;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.aism-lock-panel h2 {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 900;
	margin: 6px 0 10px;
}

.aism-lock-panel p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 18px;
}

.aism-lock-reset {
	background: rgba(255, 255, 255, 0.14);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	margin: 0 auto 14px;
	padding: 12px 18px;
}

.aism-lock-reset .aism-meta-label { color: rgba(255, 255, 255, 0.75); }
.aism-lock-reset-time { font-family: var(--font-mono); font-size: 1.05rem; }

.aism-lock-countdown {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 20px;
	opacity: 0.9;
}

/* ---------- Transaction success page ---------- */

.aism-success-grid {
	grid-template-columns: repeat(12, 1fr);
}

.aism-success-tile {
	color: var(--aism-pop-amber-ink);
	grid-column: span 8;
	padding: 44px;
	text-align: left;
}

.aism-success-icon {
	align-items: center;
	background: var(--aism-ink);
	border: 3px solid var(--aism-line);
	border-radius: 999px;
	color: var(--aism-pop-amber);
	display: flex;
	font-size: 1.4rem;
	font-weight: 700;
	height: 46px;
	justify-content: center;
	margin-bottom: 18px;
	width: 46px;
}

.aism-success-tile h2 {
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 900;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.aism-success-tile p {
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 0 24px;
}

.aism-success-quota {
	align-content: center;
	grid-column: span 4;
	text-align: left;
}

.aism-success-quota .aism-usage-chip-meta {
	color: var(--aism-pop-mint-ink);
	display: block;
	font-size: 1.15rem;
}

.aism-success-quota .aism-usage-chip-meta code {
	background: none;
	color: var(--aism-pop-mint-ink);
	font-family: var(--font-mono);
	font-size: 1.3rem;
	font-weight: 800;
}

.aism-success-quota .aism-usage-chip-sep {
	color: rgba(11, 11, 15, 0.4);
	margin: 0 8px;
}

/* ---------- Notices ---------- */

.aism-notice {
	background: var(--aism-pop-amber);
	border: 3px solid var(--aism-line);
	border-radius: 12px;
	box-shadow: var(--aism-shadow-hard-sm);
	color: var(--aism-pop-amber-ink);
	font-family: var(--font-body);
	font-weight: 600;
	margin: 20px 0;
	padding: 14px 16px;
}

/* ---------- Modal ---------- */

.aism-modal-overlay {
	align-items: center;
	background: rgba(11, 11, 15, 0.65);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 18px;
	position: fixed;
	z-index: 99999;
}

.aism-modal {
	background: var(--aism-paper);
	border: 3px solid var(--aism-line);
	border-radius: var(--aism-radius);
	box-shadow: 10px 10px 0 var(--aism-line);
	font-family: var(--font-body);
	max-width: 460px;
	padding: 28px;
	width: min(100%, 460px);
}

.aism-modal h3 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 12px;
}

.aism-modal-message {
	color: rgba(11, 11, 15, 0.75);
	line-height: 1.6;
}

.aism-modal-message a {
	color: var(--aism-pop-blue);
}

.aism-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 22px;
}

.aism-modal-button {
	background: #fff;
	border: 3px solid var(--aism-line);
	border-radius: 10px;
	box-shadow: var(--aism-shadow-hard-sm);
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 800;
	padding: 10px 16px;
}

.aism-modal-button:hover {
	box-shadow: 6px 6px 0 var(--aism-line);
	transform: translate(-1px, -1px);
}

.aism-modal-button.is-primary {
	background: var(--aism-pop-amber);
}

.aism-modal-button.is-danger {
	background: var(--aism-danger);
	color: #fff;
}

.aism-danger {
	background: var(--aism-danger);
	color: #fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
	.aism-plans-grid .aism-plan { grid-column: span 6; }

	.aism-plan-tile,
	.aism-table-tile.aism-payments-tile {
		grid-column: span 12;
		grid-row: auto;
	}

	.aism-usage-tile,
	.aism-table-tile.aism-invoices-tile { grid-column: span 6; }

	.aism-success-tile,
	.aism-success-quota { grid-column: span 12; }
}

@media (max-width: 640px) {
	.aism-maxi { padding: 18px; border-radius: 20px; }
	.aism-maxi-grid { gap: 16px; }

	.aism-plans-grid .aism-plan,
	.aism-usage-tile,
	.aism-table-tile.aism-invoices-tile,
	.aism-table-tile.aism-payments-tile { grid-column: span 12; }

	.tilt-left, .tilt-right { transform: rotate(0deg); }

	.aism-maxi-cell { border-radius: 16px; padding: 24px 20px; }

	.aism-price span { font-size: 2.3rem; }

	.aism-plan-tile h2,
	.aism-success-tile h2 { font-size: 1.7rem; }

	.aism-meter-used { font-size: 2.2rem; }

	.aism-success-tile { padding: 30px 22px; }

	.aism-marquee-track span { font-size: 0.8rem; }

	.aism-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.aism-table td { max-width: 190px; white-space: normal; }
}