/* =========================================================================
   Application pages: login, dashboard, pricing, account
   ========================================================================= */

/* ---------- Login ---------- */
.ft-route-login .ft-header { display: none; }
.ft-route-login .ft-footer { display: none; }
.ft-login { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; min-height: 100dvh; }
.ft-login-aside { background: var(--ft-ink); color: #fff; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.ft-login-aside-inner { padding: clamp(32px, 5vw, 72px); width: 100%; }
.ft-login-thread { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--ft-thread); stroke-width: 3; }
.ft-login-thread path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ft-draw 2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards; }
.ft-login-thread circle { fill: var(--ft-ink); stroke: var(--ft-thread); stroke-width: 3; }
.ft-login-aside blockquote { margin: 0; position: relative; }
.ft-login-aside blockquote p { font-family: var(--ft-font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; font-style: italic; margin: 0; max-width: 14em; }
.ft-login-main { display: grid; place-items: center; padding: 32px 20px; }
.ft-login-card { width: min(100%, 440px); }
.ft-login-logo { display:block; width:min(260px, 74vw); height:auto; max-height:110px; object-fit:contain; object-position:left center; margin:0; }
.ft-login-card h1 { font-size: clamp(2.8rem, 5vw, 4rem); margin: 24px 0 0.15em; }
.ft-google-btn { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 58px; margin: 28px 0 20px; border: 1.5px solid var(--ft-line-strong); border-radius: 14px; background: #fff; color: var(--ft-ink); font: 600 1.0625rem var(--ft-font-sans); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.ft-google-btn:hover { border-color: var(--ft-ink); background: var(--ft-lilac); box-shadow: var(--ft-shadow-md); transform: translateY(-1px); }
.ft-google-btn:focus-visible { outline: 3px solid var(--ft-thread); outline-offset: 2px; }
.ft-login-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; font-size: 0.9375rem; color: var(--ft-ink-soft); }
.ft-login-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.ft-login-points .ft-icon { color: var(--ft-meadow); margin-top: 2px; }
.ft-login-demo { font-size: 0.9375rem; margin: 0 0 28px; padding-top: 20px; border-top: 1px solid var(--ft-line); }
.ft-admin-login { font-size: 0.875rem; color: var(--ft-muted); }
.ft-admin-login summary { cursor: pointer; font-weight: 600; }
.ft-admin-login form { display: grid; gap: 10px; margin-top: 14px; }
.ft-admin-login label { display: block; font-weight: 600; margin-bottom: 4px; }
.ft-admin-login input[type="text"], .ft-admin-login input[type="password"] { width: 100%; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--ft-line-strong); border-radius: 10px; font: inherit; }
.ft-admin-login input[type="submit"] { min-height: 44px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--ft-ink), #30234d); color: #fff; font: 600 0.9rem var(--ft-font-sans); cursor: pointer; box-shadow: 0 6px 16px rgba(36,27,59,.18); }
.ft-admin-login input[type="submit"]:hover { box-shadow: 0 9px 22px rgba(36,27,59,.26); transform: translateY(-1px); }

/* ---------- Dashboard ---------- */
.ft-dash { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }
.ft-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.ft-dash-head h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin: 0; }
.ft-dash-hello { margin: 0 0 4px; font-weight: 600; color: var(--ft-muted); }
.ft-status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--ft-line); border-radius: 18px; margin-bottom: 36px; overflow: hidden; }
.ft-status-item { padding: 16px 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ft-status-item + .ft-status-item { border-left: 1px solid var(--ft-line); }
.ft-status-label { flex-basis: 100%; font-size: 0.8125rem; font-weight: 600; color: var(--ft-muted); }
.ft-status-item strong { font-size: 0.9375rem; }
.ft-status-item a { font-size: 0.875rem; font-weight: 600; }

.ft-tree-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.ft-tree-card { background: #fff; border: 1px solid var(--ft-line); border-radius: 22px; overflow: visible; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ft-tree-card:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow-md); }
.ft-tree-thumb { padding: 22px 22px 6px; background-color: #f1eef8; background-image: radial-gradient(rgba(36, 27, 59, 0.15) 1px, transparent 1.2px); background-size: 18px 18px; border-radius: 21px 21px 0 0; }
.ft-tree-thumb svg { width: 100%; height: 96px; }
.ft-thumb-line { stroke: var(--ft-thread-deep); stroke-width: 2.5; }
.ft-thumb-node { fill: #fff; stroke: var(--ft-ink); stroke-width: 1.8; }
.ft-thumb-node--alt { fill: #fdefc4; }
.ft-tone-1 .ft-tree-thumb { background-color: #f4eee0; }
.ft-tone-2 .ft-tree-thumb { background-color: #e9f1ec; }
.ft-tree-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ft-tree-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ft-tree-top h3 { font-size: 1.9rem; margin: 0 0 4px; }
.ft-tree-top h3 a { text-decoration: none; }
.ft-tree-count { margin: 0; font-weight: 650; }
.ft-tree-meta { margin: 2px 0 12px; font-size: 0.875rem; color: var(--ft-muted); }
.ft-tree-where { margin: 0 0 18px; }
.ft-tree-body .ft-btn { align-self: flex-start; margin-top: auto; }
.ft-kebab { position: relative; }
.ft-kebab summary { list-style: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; color: var(--ft-ink-soft); }
.ft-kebab summary::-webkit-details-marker { display: none; }
.ft-kebab summary:hover { background: var(--ft-lilac); }
.ft-kebab-panel { position: absolute; right: 0; top: 38px; z-index: 5; min-width: 168px; background: #fff; border: 1px solid var(--ft-line); border-radius: 14px; padding: 6px; box-shadow: var(--ft-shadow-md); }
.ft-kebab-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 9px; font: 600 0.875rem var(--ft-font-sans); cursor: pointer; text-align: left; }
.ft-kebab-panel button:hover { background: var(--ft-lilac); }
.ft-kebab-panel .is-danger { color: var(--ft-danger); }

.ft-empty { text-align: center; padding: clamp(40px, 6vw, 80px) 24px; background: #fff; border: 1.5px dashed var(--ft-line-strong); border-radius: 28px; }
.ft-empty svg { margin: 0 auto 8px; }
.ft-empty h2 { font-size: 2.4rem; margin-bottom: 0.2em; }
.ft-empty p { max-width: 28em; margin-inline: auto; color: var(--ft-ink-soft); }
.ft-empty .ft-hero-actions { justify-content: center; }
.ft-upsell { margin-top: 40px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--ft-ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ft-upsell h2 { color: #fff; font-size: 2rem; margin: 0 0 4px; }
.ft-upsell p { margin: 0; color: rgba(255, 255, 255, 0.78); max-width: 34em; }

/* ---------- Pricing page ---------- */
.ft-pricing-page { padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); }
.ft-pricing-page h1 { font-size: clamp(3rem, 6vw, 5rem); }
.ft-buy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: start; max-width: 1080px; margin: 0 auto; }
.ft-buy-card { background: var(--ft-ink); color: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 44px); }
.ft-buy-card h2 { color: #fff; font-size: 1.8rem; margin: 0; }
.ft-buy-card .ft-plan-price { color: #fff; }
.ft-buy-card .ft-plan-price span { color: var(--ft-thread); }
.ft-buy-card .ft-checklist .ft-icon { background: var(--ft-thread); color: var(--ft-ink-deep); }
.ft-buy-card .ft-hint { color: rgba(255, 255, 255, 0.65); text-align: center; }
.ft-buy-card .ft-form-error { color: #ffb4a8; margin-top: 12px; text-align: center; }
.ft-buy-card .ft-btn--primary { --btn-bg: #fff; --btn-fg: var(--ft-ink); }
.ft-buy-card .ft-unlocked { background: rgba(127, 224, 183, 0.15); color: #7fe0b7; }
.ft-compare { background: #fff; border: 1px solid var(--ft-line); border-radius: 24px; overflow: hidden; }
.ft-compare-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--ft-line); font-size: 0.9375rem; }
.ft-compare-row:last-child { border-bottom: 0; }
.ft-compare-row > span { display: flex; align-items: center; justify-content: center; padding: 16px 12px; font-weight: 600; text-align: center; }
.ft-compare-row > span:first-child { justify-content: flex-start; padding-left: 24px; font-weight: 550; }
.ft-compare-head { background: var(--ft-lilac); font-weight: 700; font-size: 0.8125rem; }
.ft-compare-row .is-paid { background: rgba(242, 179, 0, 0.12); }
.ft-compare-head > span:last-child { background: rgba(242, 179, 0, 0.28); }
.ft-compare-row .ft-icon { color: var(--ft-meadow); stroke-width: 3; }

/* ---------- Account ---------- */
.ft-account { padding: clamp(32px, 5vw, 72px) 0 clamp(64px, 8vw, 110px); }
.ft-account h1 { font-size: clamp(2.6rem, 5vw, 4rem); }
.ft-panel { background: #fff; border: 1px solid var(--ft-line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); margin-bottom: 20px; }
.ft-panel h2 { font-size: 1.7rem; margin-bottom: 0.6em; }
.ft-profile { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ft-profile .ft-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
.ft-profile h2 { margin: 0; font-size: 1.8rem; }
.ft-profile p { margin: 0; color: var(--ft-muted); }
.ft-profile .ft-btn { margin-left: auto; }
.ft-dl { margin: 0 0 16px; display: grid; gap: 12px; }
.ft-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.ft-dl dt { font-weight: 650; color: var(--ft-muted); font-size: 0.9rem; }
.ft-dl dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ft-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ft-table th, .ft-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--ft-line); }
.ft-table th { font-size: 0.8125rem; color: var(--ft-muted); }
.ft-table code { font-size: 0.8rem; word-break: break-all; }

/* ---------- Account deletion ---------- */
.ft-panel--danger {
	border-color: #e7bcb7;
	background: #fdf6f5;
}
.ft-panel--danger .ft-eyebrow {
	margin: 0 0 4px;
	color: var(--ft-danger);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .75rem;
}
.ft-panel--danger h2 { margin: 0; }
.ft-delete-account-form { display: grid; gap: 18px; margin-top: 22px; }
.ft-delete-account-form > .ft-field { max-width: 420px; }
.ft-delete-drive-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--ft-line);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
}
.ft-delete-drive-option input { margin-top: 4px; flex: 0 0 auto; }
.ft-delete-drive-option span { display: grid; gap: 4px; }
.ft-delete-drive-option small { color: var(--ft-muted); line-height: 1.45; }
.ft-delete-drive-option input:disabled + span { opacity: .62; }
.ft-delete-drive-option:has(input:focus-visible) { outline: 3px solid var(--ft-saffron); outline-offset: 2px; }
.ft-danger-note { color: var(--ft-danger) !important; font-weight: 650; }
.ft-panel--danger .ft-btn--danger:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Promo code checkout ---------- */
.ft-promo-box { margin: 22px 0 16px; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.06); }
.ft-promo-box > label { display: block; margin-bottom: 8px; font-weight: 700; color: #fff; }
.ft-promo-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.ft-promo-row input { min-width: 0; width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 10px; background: #fff; color: var(--ft-ink); font: 650 .95rem var(--ft-font-sans); text-transform: uppercase; letter-spacing: .04em; }
.ft-promo-row .ft-btn { min-height: 44px; background: #fff; color: var(--ft-ink); border-color: #fff; }
.ft-promo-message { margin: 9px 0 0; font-size: .875rem; font-weight: 650; }
.ft-promo-message.is-ok { color: #8de5bd; }
.ft-promo-message.is-error { color: #ffb4a8; }
.ft-promo-summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem; color: rgba(255,255,255,.82); }
.ft-promo-summary strong { color: #fff; }
.ft-promo-summary[hidden], .ft-promo-message[hidden] { display: none !important; }
@media (max-width: 420px) { .ft-promo-row { grid-template-columns: 1fr; } .ft-promo-row .ft-btn { width: 100%; } }