:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f9faff;
  --ink: #171b2c;
  --muted: #737a91;
  --line: #e7e9f2;
  --primary: #6658e8;
  --primary-dark: #5546d8;
  --primary-soft: #eeecff;
  --blue: #4e8ef7;
  --green: #24a77a;
  --danger: #e45765;
  --shadow: 0 18px 48px rgba(45, 38, 104, .09);
  --radius: 18px;
  --sidebar: 252px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(102, 88, 232, .25); outline-offset: 2px; }

.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.brand__mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #8174f2, #5848d5); box-shadow: 0 9px 20px rgba(102, 88, 232, .28); }
.brand__mark svg { width: 23px; height: 23px; stroke-width: 2; }
.brand--light { color: #fff; }
.brand--light .brand__mark { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); box-shadow: none; }

.primary-button, .secondary-button, .ghost-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border-radius: 11px; border: 0; cursor: pointer; font-size: 13px; font-weight: 700; transition: .2s ease; }
.primary-button { color: #fff; background: linear-gradient(135deg, #7667ee, #5c4bdb); box-shadow: 0 9px 18px rgba(102, 88, 232, .2); }
.primary-button:hover { transform: translateY(-1px); background: linear-gradient(135deg, #6b5ce6, #5140cf); box-shadow: 0 12px 22px rgba(102, 88, 232, .28); }
.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }
.primary-button svg, .secondary-button svg { width: 17px; height: 17px; }
.primary-button--large { width: 100%; min-height: 52px; justify-content: space-between; padding: 0 22px; border-radius: 13px; font-size: 14px; }
.button-arrow { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.13); }
.secondary-button { color: #4c466f; border: 1px solid #dedbea; background: #fff; }
.secondary-button:hover { border-color: #bdb6e8; color: var(--primary); background: #faf9ff; }
.ghost-button { color: var(--muted); background: transparent; }
.ghost-button:hover { color: var(--ink); background: #f1f2f7; }
.icon-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); }
.icon-button svg { width: 18px; height: 18px; }

/* Authentication */
.auth-page { background: #fff; }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(520px, 1.08fr) minmax(470px, .92fr); }
.auth-visual { position: relative; display: flex; min-height: 720px; padding: 44px 8%; flex-direction: column; overflow: hidden; color: #fff; background: radial-gradient(circle at 76% 15%, rgba(130,108,255,.8), transparent 27%), linear-gradient(145deg, #31246f 0%, #49369c 55%, #30236e 100%); }
.auth-visual::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.auth-visual::after { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; bottom: -250px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual__orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(2px); }
.auth-visual__orb--one { width: 180px; height: 180px; top: 32%; left: -90px; background: rgba(119, 91, 239, .35); }
.auth-visual__orb--two { width: 220px; height: 220px; right: 4%; bottom: 9%; background: rgba(55, 194, 241, .13); }
.auth-pitch { width: min(620px, 100%); margin: auto 0; padding: 42px 0; }
.auth-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #e5e1ff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; }
.auth-badge i { width: 7px; height: 7px; border-radius: 50%; background: #73e3bc; box-shadow: 0 0 0 4px rgba(115,227,188,.13); }
.auth-pitch h1 { margin: 25px 0 19px; font-size: clamp(38px, 4vw, 59px); line-height: 1.15; letter-spacing: -.045em; }
.auth-pitch h1 span { color: #b6afff; }
.auth-pitch > p { max-width: 550px; margin: 0 0 34px; color: #d3ceed; font-size: 16px; line-height: 1.8; }
.mini-dashboard { width: min(580px, 100%); padding: 13px; transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: 0 30px 70px rgba(14,8,50,.35); backdrop-filter: blur(12px); }
.mini-dashboard__top { display: flex; height: 22px; align-items: center; gap: 5px; }
.mini-dashboard__top i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.34); }
.mini-dashboard__top span { width: 40%; height: 6px; margin-left: 8px; border-radius: 9px; background: rgba(255,255,255,.11); }
.mini-dashboard__content { position: relative; display: grid; min-height: 200px; padding: 19px 20px 7px; grid-template-columns: 1fr 1fr; gap: 12px; overflow: hidden; border-radius: 11px; color: var(--ink); background: #fff; }
.mini-stat { display: flex; padding: 13px 14px; flex-direction: column; border: 1px solid #eeedf5; border-radius: 10px; }
.mini-stat small { color: #8a8da0; font-size: 9px; }
.mini-stat strong { margin-top: 6px; font-size: 24px; }
.mini-stat em { color: #28a479; font-size: 8px; font-style: normal; }
.mini-chart { grid-column: 1/-1; width: 100%; height: 100px; }
.mini-chart__area { fill: url(#miniFill); stroke: none; }
.mini-chart__line { stroke: #7a6beb; stroke-width: 2.5; }
.auth-visual__foot { margin: auto 0 0; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .08em; }
.auth-form-panel { display: grid; padding: 50px clamp(42px, 7vw, 110px); place-items: center; background: #fff; }
.auth-form-wrap { width: min(420px, 100%); }
.auth-form-wrap > h2 { margin: 11px 0 8px; font-size: 31px; letter-spacing: -.035em; }
.auth-form-wrap > p { margin: 0 0 34px; color: var(--muted); font-size: 14px; }
.mobile-brand { display: none; }
.stack-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span:first-child { color: #43485b; font-size: 12px; font-weight: 700; }
.field > span b { color: var(--danger); }
.field > span em, .form-section-title small { color: #9ba0b0; font-size: 10px; font-style: normal; font-weight: 500; }
.field input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #dfe1e9; border-radius: 10px; color: var(--ink); background: #fff; font-size: 13px; transition: .2s; }
.field input::placeholder { color: #b2b5c2; }
.field input:hover { border-color: #c5c3d3; }
.field input:focus { border-color: #8d82ed; outline: 3px solid rgba(102,88,232,.09); }
.field > small { color: #9a9ead; font-size: 10px; }
.field.has-error input { border-color: var(--danger); }
.field.has-error .slug-input { border-color: var(--danger); }
.field .field-error { color: var(--danger); }
.input-wrap { position: relative; display: block; }
.input-wrap > svg { position: absolute; width: 18px; height: 18px; top: 13px; left: 14px; color: #a4a7b5; }
.input-wrap > input { height: 48px; padding-left: 43px; border-radius: 12px; }
.password-toggle { position: absolute; width: 36px; height: 36px; top: 6px; right: 6px; border: 0; color: #aaaebc; background: transparent; cursor: pointer; }
.form-alert, .inline-alert { padding: 11px 13px; margin: -17px 0 18px; border: 1px solid #f3cbd0; border-radius: 10px; color: #b6424f; background: #fff5f6; font-size: 12px; }
.auth-switch { margin-top: 24px !important; text-align: center; }
.auth-switch a { color: var(--primary); font-weight: 700; }

/* App shell */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; display: flex; width: var(--sidebar); height: 100vh; inset: 0 auto 0 0; padding: 29px 22px 20px; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.sidebar .brand { padding: 0 8px 26px; }
.sidebar__nav { display: flex; padding-top: 12px; flex-direction: column; gap: 7px; border-top: 1px solid #f0f1f6; }
.nav-item { display: flex; height: 46px; padding: 0 13px; align-items: center; gap: 13px; border-radius: 11px; color: #7b8092; font-size: 13px; font-weight: 650; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { color: var(--primary); background: #f8f7ff; }
.nav-item.is-active { color: var(--primary); background: linear-gradient(90deg, #f0eeff, #f8f7ff); box-shadow: inset 3px 0 #6d5ee6; }
.sidebar__guide { margin-top: auto; padding: 17px; border: 1px solid #e5e1fb; border-radius: 15px; background: linear-gradient(145deg, #faf9ff, #f0edff); }
.sidebar__guide strong { display: block; margin: 8px 0 6px; font-size: 12px; }
.sidebar__guide p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.guide-link { padding: 0; border: 0; color: var(--primary); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.sidebar__footer { display: flex; margin-top: 17px; padding-top: 17px; align-items: center; gap: 9px; border-top: 1px solid var(--line); }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #8d7ff0, #6554d7); font-size: 12px; font-weight: 800; }
.account-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.account-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { overflow: hidden; margin-top: 2px; color: #a0a4b3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.workspace { min-height: 100vh; margin-left: var(--sidebar); padding: 42px clamp(34px, 4vw, 66px) 24px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; }
.topbar h1 { margin: 5px 0 6px; font-size: 27px; letter-spacing: -.035em; }
.topbar p { margin: 0; color: var(--muted); font-size: 12px; }
.stats-grid { display: grid; margin: 28px 0 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.metric-card { position: relative; display: flex; min-height: 130px; padding: 23px; align-items: center; gap: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 9px 26px rgba(41,45,75,.035); }
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -35px; top: -40px; border-radius: 50%; background: currentColor; opacity: .035; }
.metric-icon { display: grid; width: 49px; height: 49px; place-items: center; flex: 0 0 auto; border-radius: 14px; }
.metric-icon svg { width: 24px; height: 24px; }
.metric-card--violet .metric-icon { color: #6a58df; background: #eeebff; }
.metric-card--blue .metric-icon { color: #3d83e9; background: #eaf4ff; }
.metric-card--green .metric-icon { color: #1d9b71; background: #e7f8f1; }
.metric-card > div { display: grid; grid-template-columns: auto auto; align-items: baseline; }
.metric-card small { grid-column: 1/-1; color: var(--muted); font-size: 10px; font-weight: 650; }
.metric-card strong { margin: 5px 12px 0 0; font-size: 27px; letter-spacing: -.04em; }
.metric-card em { color: #9ba0ae; font-size: 9px; font-style: normal; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 9px 28px rgba(41,45,75,.035); }
.analytics-scope { display: flex; margin-top: 24px; padding: 20px 22px; align-items: center; justify-content: space-between; gap: 20px; }
.analytics-scope h2 { margin: 4px 0 5px; font-size: 17px; }
.analytics-scope p { margin: 0; color: var(--muted); font-size: 10px; }
.panel__header { display: flex; min-height: 73px; padding: 0 23px; align-items: center; justify-content: space-between; border-bottom: 1px solid #eceef4; }
.panel__header > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.panel__header h2 { margin: 0; font-size: 14px; }
.panel__header span { color: #9da1b0; font-size: 10px; }
.search-box { position: relative; }
.search-box svg { position: absolute; width: 15px; height: 15px; top: 10px; left: 11px; color: #a3a6b3; }
.search-box input { width: 225px; height: 36px; padding: 0 11px 0 34px; border: 1px solid #e2e4eb; border-radius: 9px; background: #fbfbfd; font-size: 10px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { height: 43px; padding: 0 20px; color: #9a9eac; background: #fafbfc; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
td { height: 76px; padding: 0 20px; border-top: 1px solid #eff0f4; font-size: 10px; }
thead + tbody tr:first-child td { border-top: 0; }
th:nth-child(1) { width: 21%; } th:nth-child(2) { width: 27%; } th:nth-child(3) { width: 13%; } th:nth-child(4) { width: 11%; } th:nth-child(5) { width: 15%; } th:nth-child(6) { width: 13%; }
.links-table th:nth-child(1) { width: 19%; }
.links-table th:nth-child(2) { width: 24%; }
.links-table th:nth-child(3) { width: 10%; }
.links-table th:nth-child(4) { width: 10%; }
.links-table th:nth-child(5) { width: 14%; }
.links-table th:nth-child(6) { width: 12%; }
.links-table th:nth-child(7) { width: 11%; }
.align-right { text-align: right; }
.short-link-cell { display: flex; align-items: center; gap: 10px; }
.link-favicon { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 14px; font-weight: 800; }
.short-link-cell > div { display: grid; min-width: 0; grid-template-columns: auto auto; align-items: center; justify-content: start; }
.short-link-cell strong { color: #383151; font-size: 11px; }
.short-link-cell small { grid-column: 1/-1; overflow: hidden; max-width: 140px; margin-top: 3px; color: #a0a3af; text-overflow: ellipsis; white-space: nowrap; }
.copy-inline { width: 22px; height: 22px; margin-left: 2px; padding: 4px; border: 0; color: #a1a4b0; background: transparent; cursor: pointer; }
.copy-inline:hover { color: var(--primary); }
.target-url { display: block; overflow: hidden; color: #646a7a; text-overflow: ellipsis; white-space: nowrap; }
.table-number { color: #2d3142; font-size: 12px; }
.table-separator { padding: 0 5px; color: #c1c3cc; }
.muted { color: #8c90a0; }
.status-pill { display: inline-flex; height: 25px; padding: 0 9px; align-items: center; gap: 6px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; }
.status-pill--active { color: #18855f; background: #e8f8f1; }
.status-pill--active i { background: #22ad7c; box-shadow: 0 0 0 3px rgba(34,173,124,.12); }
.status-pill--off { color: #777c8c; background: #f0f1f4; }
.status-pill--off i { background: #9da1ad; }
.status-pill--pending { color: #9a6c0d; background: #fff6dc; }
.status-pill--pending i { background: #e4a72d; box-shadow: 0 0 0 3px rgba(228,167,45,.12); }
.status-pill--expired { color: #a34b56; background: #fff0f2; }
.status-pill--expired i { background: #d96574; }
.time-cell { display: flex; min-width: 118px; flex-direction: column; gap: 3px; }
.time-cell strong { color: #777c8c; font-size: 9px; font-weight: 600; }
.time-cell small { color: #a4a8b4; font-size: 8px; }
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-actions form { display: inline; }
.text-button, .more-button { border: 0; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.text-button { padding: 7px 9px; border-radius: 8px; color: var(--primary); background: #f1efff; }
.more-button { padding: 7px 5px; color: #999dab; }
.empty-state { display: flex; min-height: 350px; padding: 35px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.empty-state__art { position: relative; display: grid; width: 98px; height: 98px; place-items: center; border-radius: 31px; background: linear-gradient(145deg, #f5f3ff, #e9e6ff); transform: rotate(-4deg); }
.empty-state__art::before, .empty-state__art::after { content: ""; position: absolute; border-radius: 50%; background: #dcd7ff; }
.empty-state__art::before { width: 9px; height: 9px; right: -15px; top: 16px; }
.empty-state__art::after { width: 5px; height: 5px; left: -12px; bottom: 19px; }
.empty-state__art svg { width: 56px; height: 56px; color: #7463e5; transform: rotate(4deg); }
.empty-state h3 { margin: 23px 0 7px; font-size: 15px; }
.empty-state p { max-width: 390px; margin: 0 0 19px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.search-empty, .small-empty { padding: 70px 20px; color: #989dac; text-align: center; font-size: 11px; }
.app-footer { display: flex; padding: 20px 4px 0; justify-content: space-between; color: #a8abb6; font-size: 8px; }

/* Modal */
.modal-backdrop { position: fixed; z-index: 100; display: grid; inset: 0; padding: 28px; place-items: center; visibility: hidden; opacity: 0; background: rgba(18, 18, 36, .5); backdrop-filter: blur(5px); transition: .2s; }
.modal-backdrop.is-open { visibility: visible; opacity: 1; }
.modal { width: min(650px, 100%); max-height: calc(100vh - 56px); overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 35px 90px rgba(12,10,36,.3); transform: translateY(12px) scale(.985); transition: .2s; }
.modal-backdrop.is-open .modal { transform: none; }
.modal__header { display: flex; padding: 22px 25px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal__header > div { display: flex; align-items: center; gap: 13px; }
.modal-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #8174f2, #5949d5); box-shadow: 0 8px 16px rgba(102,88,232,.22); }
.modal__header h2 { margin: 0 0 4px; font-size: 16px; }
.modal__header p { margin: 0; color: var(--muted); font-size: 10px; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #9498a6; background: transparent; cursor: pointer; font-size: 22px; }
.modal-close:hover { color: var(--ink); background: #f3f4f7; }
.modal__body { display: grid; padding: 24px 25px 8px; gap: 19px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid .field:last-child:nth-child(odd) { grid-column: 1/-1; }
.form-grid--two .field:last-child { grid-column: auto; }
.form-section-title { display: flex; margin: 3px 0 -5px; padding-top: 16px; align-items: center; gap: 8px; border-top: 1px solid #eff0f5; }
.form-section-title span { font-size: 11px; font-weight: 800; }
.slug-input { display: flex; height: 44px; align-items: center; overflow: hidden; border: 1px solid #dfe1e9; border-radius: 10px; }
.slug-input:focus-within { border-color: #8d82ed; outline: 3px solid rgba(102,88,232,.09); }
.slug-input > span { align-self: stretch; display: flex; padding: 0 12px; align-items: center; color: #7a7e8d; border-right: 1px solid #e5e6ed; background: #f7f8fa; font-size: 11px; }
.slug-input input { height: 100%; border: 0; border-radius: 0; outline: 0 !important; }
.modal__footer { display: flex; padding: 19px 25px 22px; align-items: center; justify-content: flex-end; gap: 9px; }
body.modal-open { overflow: hidden; }

/* Analytics */
.detail-topbar { display: flex; align-items: center; justify-content: space-between; }
.back-link { display: inline-flex; align-items: center; gap: 5px; color: #777d8e; font-size: 11px; font-weight: 650; }
.back-link svg { width: 17px; height: 17px; }
.back-link:hover { color: var(--primary); }
.link-hero { display: flex; margin: 24px 0 20px; padding: 22px 25px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(120deg, #fff, #fbfaff); box-shadow: 0 8px 27px rgba(41,45,75,.035); }
.link-hero__icon { display: grid; width: 50px; height: 50px; margin-right: 15px; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #8375f0, #5949d4); box-shadow: 0 10px 20px rgba(102,88,232,.22); font-size: 20px; font-weight: 800; }
.link-hero__copy { min-width: 0; flex: 1; }
.link-hero__copy > div { display: flex; align-items: center; gap: 9px; }
.link-hero h1 { margin: 0; font-size: 19px; }
.hero-url { display: flex; margin: 6px 0 4px; padding: 0; align-items: center; gap: 5px; border: 0; color: var(--primary); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.hero-url svg { width: 13px; height: 13px; }
.link-hero__copy p { overflow: hidden; max-width: 600px; margin: 0; color: #969aa8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.link-hero__meta { display: flex; padding-left: 25px; align-items: flex-end; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); text-align: right; }
.link-hero__meta small { display: block; margin-bottom: 5px; color: #9a9ead; font-size: 9px; }
.link-hero__meta strong { font-size: 10px; }
.schedule-panel { display: flex; padding: 18px 20px; align-items: flex-end; justify-content: space-between; gap: 20px; }
.schedule-panel h2 { margin: 0 0 4px; font-size: 14px; }
.schedule-panel p { margin: 0; color: var(--muted); font-size: 9px; }
.schedule-controls { display: flex; align-items: flex-end; gap: 8px; }
.schedule-controls label { display: flex; flex-direction: column; gap: 5px; color: #8b8f9e; font-size: 8px; }
.schedule-controls input { height: 36px; padding: 0 9px; border: 1px solid #dddfe8; border-radius: 9px; color: #555a6c; background: #fff; font-size: 10px; }
.analytics-filter { display: flex; margin: 28px 0 15px; align-items: flex-end; justify-content: space-between; }
.analytics-filter h2 { margin: 0 0 4px; font-size: 17px; }
.analytics-filter p { margin: 0; color: var(--muted); font-size: 10px; }
.date-controls { display: flex; align-items: flex-end; gap: 7px; }
.date-controls > span { padding-bottom: 11px; color: #aaaeba; }
.date-controls label { display: flex; flex-direction: column; gap: 5px; color: #9397a5; font-size: 8px; }
.date-controls input { height: 36px; padding: 0 9px; border: 1px solid #dddfe8; border-radius: 9px; color: #555a6c; background: #fff; font-size: 10px; }
.analytics-summary { display: grid; margin-bottom: 15px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.analytics-summary article { display: flex; min-height: 100px; padding: 19px 21px; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.summary-dot { width: 9px; height: 45px; border-radius: 9px; }
.summary-dot--purple { background: linear-gradient(#7d6fed, #c3bcff); }
.summary-dot--blue { background: linear-gradient(#4b96f4, #b7ddff); }
.summary-dot--green { background: linear-gradient(#20ad7d, #a9ead4); }
.analytics-summary div { display: grid; grid-template-columns: auto auto; align-items: baseline; }
.analytics-summary small { grid-column: 1/-1; color: #777c8d; font-size: 9px; }
.analytics-summary strong { margin: 4px 9px 0 0; font-size: 24px; }
.analytics-summary em { color: #a1a5b1; font-size: 8px; font-style: normal; }
.inline-alert { margin: 0 0 14px; }
.chart-panel { margin-bottom: 15px; }
.chart-legend { display: flex; gap: 14px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 4px; }
.legend-pv { background: var(--primary); }
.legend-uv { background: #58a8f7; }
.trend-chart { min-height: 275px; padding: 18px 20px 14px; }
.trend-chart svg { width: 100%; height: 240px; overflow: visible; }
.chart-grid-line { stroke: #eceef4; stroke-width: 1; }
.chart-axis-label { fill: #a1a5b2; stroke: none; font-size: 9px; }
.chart-area { fill: url(#chartFill); stroke: none; }
.chart-line-pv { stroke: #6f60e6; stroke-width: 2.5; }
.chart-line-uv { stroke: #54a4ef; stroke-width: 2; stroke-dasharray: 5 4; }
.chart-point { fill: #fff; stroke: #6f60e6; stroke-width: 2; }
.chart-empty { display: flex; height: 280px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.chart-empty__bars { display: flex; height: 65px; align-items: end; gap: 6px; }
.chart-empty__bars i { width: 9px; border-radius: 3px 3px 0 0; background: #dedbea; }
.chart-empty__bars i:nth-child(1) { height: 20px; }.chart-empty__bars i:nth-child(2) { height: 42px; }.chart-empty__bars i:nth-child(3) { height: 30px; }.chart-empty__bars i:nth-child(4) { height: 55px; }.chart-empty__bars i:nth-child(5) { height: 37px; }
.chart-empty h3 { margin: 14px 0 5px; font-size: 13px; }
.chart-empty p { margin: 0; color: #989cab; font-size: 9px; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.distribution-panel { min-height: 310px; }
.distribution-panel .panel__header { min-height: 64px; }
.distribution-panel .panel__header > div:first-child { display: block; }
.distribution-panel .panel__header h2 { margin-bottom: 4px; }
.panel-badge { padding: 4px 8px; border-radius: 8px; color: var(--primary) !important; background: var(--primary-soft); font-weight: 800; }
.rank-list { padding: 18px 23px; }
.rank-row { margin-bottom: 15px; }
.rank-row:last-child { margin-bottom: 0; }
.rank-row > div:first-child { display: flex; margin-bottom: 6px; align-items: center; }
.rank-row span { display: grid; width: 18px; height: 18px; margin-right: 8px; place-items: center; border-radius: 6px; color: #8277bd; background: #f1efff; font-size: 8px; }
.rank-row strong { flex: 1; font-size: 10px; }
.rank-row em { color: #777c8d; font-size: 9px; font-style: normal; }
.progress { height: 4px; margin-left: 26px; overflow: hidden; border-radius: 6px; background: #f0f1f5; }
.progress i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8375ed, #b4abfa); }
.donut-layout { display: flex; min-height: 240px; padding: 22px; align-items: center; justify-content: space-around; gap: 20px; }
.donut-chart { width: 150px; height: 150px; flex: 0 0 auto; }
.donut-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: #f0f1f5; stroke-width: 14; }
.donut-segment { fill: none; stroke-width: 14; stroke-linecap: butt; }
.donut-center-label { fill: #9a9ead; stroke: none; font-size: 7px; text-anchor: middle; transform: rotate(90deg); transform-origin: center; }
.donut-center-value { fill: #24283a; stroke: none; font-size: 16px; font-weight: 800; text-anchor: middle; transform: rotate(90deg); transform-origin: center; }
.donut-legend { min-width: 130px; }
.donut-legend > div { display: flex; margin: 11px 0; align-items: center; gap: 7px; font-size: 9px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 50%; }
.donut-legend span { flex: 1; color: #686d7d; }
.donut-legend strong { font-size: 9px; }
.donut-color-0 { background: #7161e6; }.donut-color-1 { background: #4ba3ed; }.donut-color-2 { background: #35bc8c; }.donut-color-3 { background: #f1af55; }.donut-color-4 { background: #e06b87; }.donut-color-5 { background: #8b94a7; }
.source-list { padding: 11px 23px; }
.source-list > div { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid #eff0f4; }
.source-list > div:last-child { border-bottom: 0; }
.source-icon { display: grid; width: 30px; height: 30px; margin-right: 10px; place-items: center; border-radius: 9px; color: #6557d9; background: #efedff; font-size: 10px; font-weight: 800; }
.source-list > div > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.source-list strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.source-list small { margin-top: 2px; color: #a0a4b2; font-size: 8px; }
.source-list em { color: #5f6474; font-size: 10px; font-style: normal; font-weight: 700; }
.analytics-loading { display: grid; height: 320px; place-items: center; color: var(--primary); font-size: 12px; }

/* Error states */
.error-page { background: radial-gradient(circle at 50% 0, #f0edff, transparent 35%), #fafbfe; }
.error-shell { display: flex; min-height: 100vh; padding: 35px; align-items: center; flex-direction: column; }
.error-shell > .brand { align-self: flex-start; }
.error-card { display: flex; width: min(520px, 100%); margin: auto; align-items: center; flex-direction: column; text-align: center; }
.error-art { position: relative; display: grid; width: 165px; height: 165px; margin-bottom: 25px; place-items: center; border-radius: 50%; color: #7464e3; background: linear-gradient(145deg, #f3f1ff, #e5e1ff); }
.error-art::before, .error-art::after { content: ""; position: absolute; border-radius: 50%; background: #cbc4ff; }
.error-art::before { width: 9px; height: 9px; top: 14px; right: 8px; }.error-art::after { width: 5px; height: 5px; bottom: 20px; left: -3px; }
.error-art span { position: absolute; z-index: 2; padding: 3px 7px; top: 21px; right: 5px; border-radius: 8px; color: #fff; background: #6f5fe0; font-size: 15px; font-weight: 900; transform: rotate(7deg); box-shadow: 0 6px 13px rgba(102,88,232,.2); }
.error-art svg { width: 103px; height: 103px; }
.error-card h1 { margin: 8px 0; font-size: 28px; letter-spacing: -.035em; }
.error-card > p { max-width: 420px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.error-actions { display: flex; margin-top: 24px; gap: 9px; }
.error-foot { color: #a8abb6; font-size: 9px; }

/* Toast */
.toast-stack { position: fixed; z-index: 200; display: flex; width: min(370px, calc(100vw - 32px)); top: 20px; right: 20px; flex-direction: column; gap: 9px; }
.toast { display: flex; min-height: 52px; padding: 9px 10px 9px 12px; align-items: center; gap: 10px; border: 1px solid #dedfe7; border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); font-size: 11px; animation: toast-in .3s both; }
.toast__icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; font-weight: 900; }
.toast--success .toast__icon { color: #187f5c; background: #e5f8f0; }
.toast--error .toast__icon { color: #b94251; background: #fff0f2; }
.toast > span:nth-child(2) { flex: 1; }
.toast.is-leaving { animation: toast-out .2s both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

@media (max-width: 1050px) {
  :root { --sidebar: 215px; }
  .sidebar { padding-inline: 16px; }
  .sidebar__guide { display: none; }
  .workspace { padding-inline: 28px; }
  .auth-shell { grid-template-columns: 1fr 1fr; }
  .auth-form-panel { padding-inline: 42px; }
  .mini-dashboard { transform: none; }
  .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .auth-shell { display: block; }
  .auth-visual { display: none; }
  .auth-form-panel { min-height: 100vh; padding: 34px 24px; }
  .mobile-brand { display: flex; margin-bottom: 60px; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; }
  .mobile-brand .brand__mark { width: 32px; height: 32px; }
  .sidebar { position: static; width: 100%; height: 72px; padding: 0 20px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { padding: 0; }
  .sidebar__nav, .sidebar__guide, .sidebar__footer { display: none; }
  .workspace { margin-left: 0; padding: 25px 18px 20px; }
  .topbar { align-items: center; }
  .topbar p { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 100px; }
  .panel__header { padding-inline: 16px; }
  .search-box { display: none; }
  .table-wrap { overflow-x: auto; }
  table { min-width: 850px; }
  .links-table { min-width: 1060px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { max-height: 92vh; border-radius: 20px 20px 0 0; }
  .form-grid, .form-grid--two { grid-template-columns: 1fr; }
  .form-grid .field:last-child, .form-grid--two .field:last-child { grid-column: auto; }
  .link-hero { align-items: flex-start; }
  .link-hero__meta { display: none; }
  .schedule-panel { align-items: stretch; flex-direction: column; }
  .schedule-controls { display: grid; grid-template-columns: 1fr; }
  .analytics-filter { align-items: stretch; flex-direction: column; gap: 14px; }
  .analytics-scope { align-items: flex-start; flex-direction: column; }
  .date-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .date-controls > span { display: none; }
  .date-controls .secondary-button { grid-column: 1/-1; }
  .analytics-summary { grid-template-columns: 1fr; }
  .analytics-summary article { min-height: 82px; }
  .analytics-grid { grid-template-columns: 1fr; }
  .donut-layout { flex-direction: column; }
  .error-shell { padding: 24px; }
  .error-shell > .brand { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Account security, legal and administration */
.captcha-row { display: grid; grid-template-columns: minmax(120px, 1fr) 132px auto; gap: 10px; align-items: center; }
.captcha-row img { width: 132px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: #f7f8fc; }
.captcha-row .input-wrap { min-width: 0; }
.terms-check { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.terms-check input { margin-top: 4px; accent-color: var(--primary); }
.terms-check a, .auth-actions a, .legal-links a { color: var(--primary); font-weight: 700; }
.auth-actions { display: flex; justify-content: space-between; margin-top: -5px; font-size: 13px; }
.simple-auth-shell, .public-shell { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: radial-gradient(circle at top, #f1efff, #f8f9fd 43%); }
.simple-auth-shell > .brand, .public-shell > .brand { position: absolute; top: 30px; left: 34px; }
.simple-auth-card, .public-card { width: min(100%, 500px); padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 22px 70px rgba(38, 30, 90, .10); }
.simple-auth-card h1, .public-card h1 { margin: 8px 0 10px; font-size: 32px; }
.simple-auth-card > p, .public-card > p { color: var(--muted); margin-bottom: 28px; line-height: 1.7; }
.simple-auth-card .primary-button, .public-card .primary-button { justify-content: center; text-decoration: none; }
.empty-note { padding: 18px; margin: 20px 0; border-radius: 12px; background: #f5f3ff; color: #51469f; line-height: 1.7; }
.status-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 26px; }
.status-icon--success { color: #137a53; background: #dcf8eb; }
.legal-links { display: flex; justify-content: center; gap: 24px; margin-top: 30px; font-size: 13px; }
.field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: #fff; color: var(--ink); font: inherit; resize: vertical; }
.legal-shell { min-height: 100vh; padding: 30px max(24px, calc((100vw - 980px)/2)); background: #f7f8fc; }
.legal-shell > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.legal-document { padding: clamp(28px, 6vw, 68px); border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 14px 50px rgba(31, 34, 57, .06); }
.legal-document h1 { margin: 8px 0; font-size: clamp(34px, 5vw, 52px); }
.legal-document h2 { margin: 34px 0 10px; font-size: 20px; }
.legal-document p { color: #596077; line-height: 1.9; }
.legal-updated { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.admin-workspace { max-width: none; }
.admin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; padding: 12px; margin: 8px 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.admin-tabs a { padding: 9px 13px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-tabs a:hover { color: var(--primary); background: #f2f0ff; }
.admin-section { margin-bottom: 22px; scroll-margin-top: 85px; }
.admin-inline-form { display: flex; align-items: end; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.admin-inline-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-inline-form input { min-width: 130px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.admin-inline-form .admin-grow { flex: 1; }
.admin-inline-form .admin-grow input { width: 100%; }
.danger-button { border: 0; border-radius: 10px; padding: 11px 16px; background: #fff0f1; color: #bc3445; font-weight: 800; cursor: pointer; white-space: nowrap; }
.danger-button.compact { padding: 7px 10px; }
.admin-url { display: block; max-width: 300px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.admin-section code { font-size: 11px; color: #5a6072; }
.member-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.renew-popover { position: relative; text-align: left; }
.renew-popover summary { color: var(--primary); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.renew-popover > form { position: absolute; z-index: 8; top: 28px; right: 0; width: 300px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.renew-popover label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.renew-popover textarea { width: 100%; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; resize: vertical; }
.membership-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; margin: -4px 0 22px; border: 1px solid #dedafc; border-radius: 14px; background: linear-gradient(110deg, #f8f6ff, #f3f8ff); }
.membership-strip > div { display: flex; align-items: center; gap: 12px; }
.membership-strip span:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.membership-strip strong { font-size: 14px; }

@media (max-width: 1000px) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-inline-form { align-items: stretch; flex-direction: column; }
  .admin-inline-form input { width: 100%; }
}
@media (max-width: 600px) {
  .captcha-row { grid-template-columns: 1fr 112px; }
  .captcha-row img { width: 112px; }
  .captcha-row .text-button { grid-column: 2; }
  .simple-auth-card, .public-card { padding: 28px 22px; }
  .simple-auth-shell > .brand, .public-shell > .brand { position: static; justify-self: start; margin-bottom: 22px; }
  .simple-auth-shell, .public-shell { place-items: start stretch; }
  .admin-stats { grid-template-columns: 1fr; }
  .membership-strip, .membership-strip > div { align-items: flex-start; flex-direction: column; gap: 5px; }
}