:root {
  --ink: #1d2939;
  --muted: #687688;
  --line: rgba(255, 255, 255, .6);
  --pink: #e975aa;
  --purple: #7865e8;
  --peach: #ffb48d;
  --glass: rgba(255, 255, 255, .43);
  --shadow: 0 22px 55px rgba(91, 92, 138, .13), inset 0 1px rgba(255, 255, 255, .86);
}

/* Base & Utility */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f8f7fc; overflow-x: hidden; }
body::before { content: ""; position: fixed; z-index: -4; inset: 0; background: radial-gradient(circle at 7% 20%, #f9d9e4 0, transparent 25rem), radial-gradient(circle at 84% 10%, #e3ddff 0, transparent 31rem), linear-gradient(125deg, #fbf8f5 0%, #f5f4fb 55%, #f9f5fa 100%); }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* Ambient Background Elements */
.ambient { position: fixed; z-index: -2; border-radius: 999px; filter: blur(3px); opacity: .75; pointer-events: none; }
.ambient-one { width: 21rem; height: 21rem; background: rgba(255, 183, 208, .42); top: 24%; left: -10rem; }
.ambient-two { width: 26rem; height: 26rem; background: rgba(183, 172, 255, .3); top: 5%; right: -10rem; }
.ambient-three { width: 18rem; height: 18rem; background: rgba(255, 197, 151, .22); bottom: -8rem; right: 18%; }

/* Navigation */
.site-header { width: min(1240px, calc(100% - 40px)); height: 98px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #334056; font-size: clamp(18px, 2vw, 23px); font-weight: 700; letter-spacing: -1.3px; }
.brand-mark { position: relative; display: inline-block; width: 25px; height: 25px; transform: rotate(-22deg); }
.brand-mark i { position: absolute; display: block; height: 7px; border-radius: 999px; transform: rotate(-35deg); background: linear-gradient(90deg, #e781b2, #9b79ed); }
.brand-mark i:nth-child(1) { width: 15px; left: 0; top: 4px; }
.brand-mark i:nth-child(2) { width: 22px; left: 2px; top: 10px; }
.brand-mark i:nth-child(3) { width: 13px; left: 10px; top: 16px; }

.header-actions { display: flex; align-items: center; gap: 15px; }
.text-button, .back-link { color: #59677a; border: 0; background: transparent; font-size: 14px; font-weight: 500; transition: color .2s ease; padding: 5px 10px; }
.text-button:hover, .back-link:hover { color: var(--purple); }
.header-signup { border: 1px solid rgba(255,255,255,.8); border-radius: 999px; padding: 10px 20px; color: #fff; background: linear-gradient(112deg, #ed85ae, #8b72e7); box-shadow: 0 8px 18px rgba(168, 101, 193, .22), inset 0 1px rgba(255,255,255,.3); font-size: 14px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.header-signup:hover, .primary-button:hover { transform: translateY(-2px); box-shadow: 0 13px 25px rgba(139, 102, 204, .28), inset 0 1px rgba(255,255,255,.3); }

/* Buttons & Inputs */
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 24px; color: white; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: linear-gradient(105deg, #e882b5 0%, #a474e3 100%); box-shadow: 0 8px 18px rgba(151, 106, 209, .2), inset 0 1px rgba(255,255,255,.35); font-size: 15px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.primary-button span { font-size: 19px; line-height: 0; }

/* Hero Section */
.hero { width: min(1130px, calc(100% - 40px)); min-height: 550px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: #987da2; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow span { width: 20px; height: 1px; background: #d888ae; }
h1, h2 { margin: 0; letter-spacing: -2px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.hero h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.05; }
h1 em { position: relative; color: #9b78dc; font-weight: 600; font-style: normal; }
h1 em::after { content: ""; position: absolute; bottom: 4px; left: 0; width: 100%; height: 8px; z-index: -1; border-radius: 100%; background: rgba(242, 183, 211, .7); transform: rotate(-2deg); }
.hero-description { max-width: 400px; margin: 20px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* Abstract Hero Art */
.hero-art { position: relative; width: 100%; min-height: 400px; display: flex; justify-content: center; align-items: center; }
.glow-core { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), rgba(246, 194, 215, .6) 30%, rgba(184, 169, 248, .4) 70%, rgba(149, 123, 223, .1)); box-shadow: 0 0 60px 20px rgba(204, 173, 239, .3); }
.orbit { position: absolute; border: 1px solid rgba(170, 139, 211, .25); border-radius: 50%; }
.orbit-outer { width: 400px; height: 400px; transform: rotate(-20deg); }
.orbit-inner { width: 280px; height: 280px; border-color: rgba(255,255,255,.7); }
.bubble { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.bubble-one { top: 10%; left: 10%; width: 45px; height: 45px; color: #ce7eaf; }
.bubble-two { top: 70%; right: 15%; width: 30px; height: 30px; color: #8e76dc; font-size: 12px; }
.bubble-three { bottom: 10%; left: 20%; width: 35px; height: 35px; color: #89bfaf; }

/* Features */
.feature-strip { width: min(1130px, calc(100% - 40px)); margin: 40px auto; padding: 25px 35px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.3); box-shadow: inset 0 1px rgba(255,255,255,.6); backdrop-filter: blur(10px); }
.feature-strip > p { min-width: 150px; margin: 0; color: #8a7994; font-family: Georgia, serif; font-size: 18px; line-height: 1.3; }
.feature-list { display: flex; flex-wrap: wrap; gap: 30px; width: 100%; }
.feature-list div { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.feature-list span { grid-row: span 2; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #c779ae; background: rgba(253, 229, 239, .8); font-size: 14px; }
.feature-list strong { color: #506075; font-size: 13px; margin-bottom: 2px; }
.feature-list small { color: #9aa2b0; font-size: 11px; }

/* Shorten Page */
.shorten-main { width: min(800px, calc(100% - 40px)); margin: 60px auto; text-align: center; }
.shorten-intro { margin-bottom: 40px; }
.shorten-intro .eyebrow { justify-content: center; }
.shorten-panel { padding: 10px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,255,255,.35); box-shadow: var(--shadow); backdrop-filter: blur(15px); }
.shorten-form { padding: 30px; text-align: left; }
.shorten-form > label { display: block; margin-bottom: 10px; color: #4c5b70; font-size: 14px; font-weight: 600; }
.url-entry { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 15px; border: 1px solid rgba(175, 151, 201, .3); border-radius: 15px; background: rgba(255,255,255,.7); box-shadow: inset 0 1px #fff; }
.link-glyph { color: #ad84bc; font-size: 20px; }
.url-entry input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #445369; padding: 10px 0; min-width: 0; }
.input-message { margin-top: 10px; font-size: 12px; color: #9ca6b1; }
.input-message.is-error { color: #d35f8d; font-weight: 500; }
.advanced-row { margin-top: 20px; }
.advanced-toggle { border: none; background: transparent; color: #9b6da7; font-size: 12px; font-weight: 600; padding: 0; }
.advanced-options { margin-top: 10px; }
.advanced-options label { display: flex; align-items: center; padding: 10px 15px; border: 1px solid rgba(175, 151, 201, .3); border-radius: 10px; background: rgba(255,255,255,.5); font-size: 13px; color: #788495; }
.advanced-options input { border: none; outline: none; background: transparent; padding-left: 5px; color: #536176; flex: 1; min-width: 0; }

/* Result Card */
.result-card { margin: 10px; padding: 25px; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: linear-gradient(110deg, rgba(255,240,246,.8), rgba(237,233,255,.8)); text-align: center; }
.result-icon { width: 35px; height: 35px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.8); color: #c67bac; }
.result-card p { font-size: 11px; font-weight: 700; color: #9c779e; letter-spacing: 1px; margin: 0 0 10px; }
.result-link { display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; }
.result-link a { font-size: clamp(18px, 4vw, 24px); font-weight: 700; color: #7459b9; word-break: break-all; }
.result-link button { padding: 6px 15px; border: 1px solid rgba(141,115,190,.3); border-radius: 8px; background: rgba(255,255,255,.7); color: #8566b9; font-weight: 700; font-size: 12px; }
.result-original { display: block; margin-top: 15px; font-size: 12px; color: #9399a7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Dashboard Page */
.dashboard-page .site-header {
  width: min(1240px, calc(100% - 40px));
}

.dashboard-main {
  width: min(1180px, calc(100% - 40px));
  margin: 30px auto 50px;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(460px, 1.2fr) minmax(300px, .8fr);
  gap: 30px;
  align-items: center;
}

.dashboard-summary {
  padding: 20px 0;
}

.dashboard-summary h1 {
  font-size: clamp(52px, 5vw, 70px);
  line-height: 1.1;
}

.dashboard-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.dashboard-badge {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(244, 211, 230, 0.8);
  border: 1px solid rgba(144, 115, 190, 0.2);
  color: #845a91;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dashboard-meta-text {
  color: var(--muted);
  font-size: 13px;
}

.dashboard-actions {
  margin-top: 30px;
}

.dashboard-summary-card {
  padding: 30px;
  border-radius: 24px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.dashboard-summary-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #44a172;
}

.live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #44a172;
  box-shadow: 0 0 0 4px rgba(68,161,114,0.1);
}

.dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.dashboard-stat {
  padding: 15px 0;
  border-top: 1px solid rgba(196, 176, 220, 0.35);
}

.stat-value {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3vw, 40px);
  color: #5a438e;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
  text-transform: uppercase;
}

.dashboard-content {
  display: grid;
  grid-template-columns: minmax(620px, 2fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 30px;
}

.dashboard-panel,
.mini-panel {
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 24px;
  background: rgba(255,255,255,0.45);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.dashboard-panel {
  padding: 26px;
}

.dashboard-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(150, 126, 180, 0.2);
  padding-bottom: 20px;
}

.panel-kicker {
  color: #987da2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.dashboard-panel-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 40px);
  margin-top: 8px;
  color: var(--ink);
}

.panel-link {
  font-weight: 700;
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-table th {
  padding: 18px 14px 14px;
  color: #806a87;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid rgba(150,126,180,0.2);
}

.dashboard-table td {
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
  border-bottom: 1px solid rgba(150,126,180,0.14);
}

.dashboard-table tbody tr:hover {
  background: rgba(255,255,255,0.45);
}

.original-url {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4f596d;
}

.short-url {
  color: #795bb2;
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.badge-live {
  color: #387a59;
  background: rgba(214, 240, 223, 0.95);
}

.badge-guest {
  color: #a06a86;
  background: rgba(249, 220, 233, 0.95);
}

.dashboard-side {
  display: grid;
  gap: 20px;
}

.mini-panel {
  padding: 24px;
}

.mini-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  color: var(--ink);
}

.mini-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(238,230,255,0.8);
  color: #8b6edb;
}

.health-score {
  display: grid;
  gap: 5px;
  margin-top: 25px;
}

.health-score-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 50px;
  color: #765cbd;
}

.health-score-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.health-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 60px;
  margin-top: 10px;
}

.bar {
  display: inline-block;
  width: 30px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, #e78fb7, #8b72e7);
}

.bar-one { height: 24px; }
.bar-two { height: 42px; }
.bar-three { height: 34px; }

.activity-list {
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.activity-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--muted);
  border-top: 1px solid rgba(150,126,180,0.14);
  font-size: 12px;
}

.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b684c2;
}

/* Dashboard responsive rules */
@media (max-width: 960px) {
  .dashboard-hero,
  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .dashboard-summary-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media (max-width: 650px) {
  .dashboard-summary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-panel {
    padding: 16px;
  }

  .dashboard-main {
    margin-top: 10px;
  }
}

/* Authentication Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(45, 41, 66, .4); backdrop-filter: blur(10px); }
.auth-modal { position: relative; width: 100%; max-width: 420px; padding: 40px; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(250,249,255,.9); box-shadow: 0 30px 60px rgba(52, 39, 86, .2); text-align: center; }
.close-modal { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0,0,0,.05); font-size: 18px; color: #555; }
.auth-modal h2 { margin: 15px 0 25px; font-size: 32px; }
.auth-form { display: grid; gap: 15px; text-align: left; }
.auth-form label { font-size: 13px; font-weight: 600; color: #566276; display: grid; gap: 5px; }
.auth-form input { width: 100%; padding: 12px 15px; border: 1px solid rgba(161, 146, 190, .3); border-radius: 10px; background: rgba(255,255,255,.8); font-size: 14px; outline-color: #bd8ee3; }

/* ========================================= */
/* Responsive Breakpoints (Tablet & Mobile)  */
/* ========================================= */

@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; text-align: center; margin-top: 20px; gap: 20px; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-actions { justify-content: center; }
  .hero-art { min-height: 350px; transform: scale(0.85); margin-top: -30px; }
  
  .feature-strip { flex-direction: column; text-align: center; padding: 25px 20px; }
  .feature-list { justify-content: center; }
  .feature-strip > p { margin-bottom: 15px; border-bottom: 1px solid rgba(170,139,211,.2); padding-bottom: 15px; }
}

@media (max-width: 650px) {
  .site-header { flex-direction: column; gap: 15px; height: auto; padding: 15px 0; justify-content: center; }
  .header-actions { flex-wrap: wrap; justify-content: center; width: 100%; }
  
  .hero h1 { font-size: 40px; }
  .orbit-outer { width: 300px; height: 300px; }
  .orbit-inner { width: 200px; height: 200px; }
  
  .feature-list { display: grid; grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .feature-list div { max-width: 280px; margin: 0 auto; }
  
  .shorten-form { padding: 20px 15px; }
  .url-entry { flex-direction: column; align-items: stretch; border: none; background: transparent; padding: 0; box-shadow: none; gap: 15px; }
  .url-entry input { border: 1px solid rgba(175, 151, 201, .3); padding: 12px 15px; border-radius: 12px; background: rgba(255,255,255,.7); width: 100%; }
  .url-entry .primary-button { width: 100%; justify-content: center; }
  .link-glyph { display: none; }
  
  .auth-modal { padding: 30px 20px; }
  .auth-modal h2 { font-size: 28px; }
}