:root{
    --bg:#1E1424; --panel:#271B2E; --panel-raised:#2E2136;
    --ink:#F5EFE6; --ink-dim:#C9BEDD; --ink-faint:#A398C0;
    --heart:#E8536B; --heart-empty:#4A3540;
    --action:#92A87F; --action-ink:#1C2417; --gold:#D4A857;
    --rule:rgba(245,239,230,0.08); --rule-strong:rgba(245,239,230,0.15);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{
    margin:0;
    background:
      radial-gradient(ellipse 700px 400px at 20% -10%, rgba(232,83,107,0.10), transparent 60%),
      radial-gradient(ellipse 600px 400px at 90% 110%, rgba(146,168,127,0.08), transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    display:flex; align-items:center; justify-content:center;
    min-height:100vh;
    min-height:-webkit-fill-available;
    min-height:100dvh;
    padding:0;
  }
  .phone{
    width:100%; max-width:480px;
    height:100vh;
    height:-webkit-fill-available;
    height:100dvh;
    background:var(--panel);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .screen{
    background:var(--bg);
    flex:1; min-height:0;
    display:flex; flex-direction:column;
    position:relative;
    overflow:hidden;
  }
  .screen-content{
    flex:1; min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:calc(22px + env(safe-area-inset-top, 0px)) 18px 14px;
    display:flex; flex-direction:column; gap:16px;
  }
  /* Mobile stays full-bleed. Desktop becomes a normal responsive web app. */
  .greet{font-size:11.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;letter-spacing:0.06em;}
  h1{font-family:'Fraunces',serif;font-weight:500;font-size:24px;margin:0;letter-spacing:-0.01em;}
  h2{font-family:'Fraunces',serif;font-weight:500;font-size:19px;margin:0;}
  .ring-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;color:var(--gold);margin:8px 0 -2px;opacity:0.9;}
  .row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-radius:14px;cursor:pointer;min-height:44px;}
  .row:active{background:var(--panel-raised);}
  .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4A3540,#2B222F);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:15px;border:1px solid var(--rule-strong);flex:0 0 auto;}
  .row-name{font-size:14px;color:var(--ink);}
  .row-meta{font-size:11px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;}
  .row-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
  .heart-mini{width:26px;height:26px;flex:0 0 auto;}
  .empty-state{color:var(--ink-faint);font-size:13px;line-height:1.5;padding:20px 4px;text-align:center;}
  .btn{border:none;border-radius:14px;padding:15px 16px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:14px;cursor:pointer;min-height:48px;}
  button,input,select,textarea{-webkit-appearance:none;appearance:none;font:inherit;}
  input,select,textarea{font-size:16px;}
  .btn-primary{background:var(--action);color:var(--action-ink);}
  .btn-ghost{background:var(--panel-raised);color:var(--ink-dim);border:1px solid var(--rule-strong);}
  .fab{position:absolute;bottom:calc(70px + env(safe-area-inset-bottom, 0px));right:max(8px, env(safe-area-inset-right, 0px));width:48px;height:48px;border-radius:50%;background:var(--action);color:var(--action-ink);font-size:22px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 8px 20px -6px rgba(146,168,127,0.5);}
  .nav{display:flex;gap:6px;padding:8px 18px calc(14px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--rule);flex:0 0 auto;}
  .nav button{flex:1;background:none;border:none;color:var(--ink-faint);font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:0.01em;padding:7px 4px 8px;border-radius:12px;cursor:pointer;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
  .nav button span{font-size:16px;line-height:1;}
  .nav button.active{color:var(--ink);background:var(--panel-raised);}
  .page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .header-action{border:1px solid var(--rule-strong);border-radius:999px;background:var(--panel-raised);color:var(--ink);padding:8px 11px;min-height:40px;font-weight:600;font-size:12px;white-space:nowrap;}
  .empty-action{display:block;margin:16px auto 0;padding:11px 16px;min-height:44px;}
  .pulse-start-card{background:var(--panel-raised);border:1px solid var(--rule);border-radius:20px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;}
  .pulse-start-card .btn{width:100%;margin-top:4px;}
  .pulse-summary{background:var(--panel-raised);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;color:var(--ink-faint);font-size:12px;}
  .pulse-summary strong{color:var(--ink);font-weight:600;}
  .pulse-exit{align-self:flex-start;border:0;background:transparent;color:var(--ink-faint);font:500 13px 'Work Sans',sans-serif;padding:10px 12px;margin:-8px 0 0 -12px;min-height:44px;cursor:pointer;}
  .backup-reminder{border:1px solid rgba(212,168,87,.5);border-radius:14px;background:rgba(212,168,87,.09);padding:12px 13px;display:flex;align-items:center;gap:10px;}
  .backup-reminder div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;}
  .backup-reminder strong{font-size:12px;color:var(--gold);}
  .backup-reminder span{font-size:11px;color:var(--ink-dim);line-height:1.35;}
  .backup-reminder button{border:0;border-radius:10px;background:var(--gold);color:var(--bg);padding:9px 10px;min-height:40px;font-weight:700;font-size:11px;white-space:nowrap;}
  .card-relationship-type{line-height:1.5;}
  .card-relationship-type span{color:var(--gold);font-weight:600;}
  .card-heart-rating{display:inline-flex;align-items:center;gap:1px;margin-top:3px;font-size:13px;line-height:1.3;}
  .card-heart-rating .filled{color:var(--heart);}
  .card-heart-rating .empty{color:var(--heart-empty);}
  .card-heart-rating strong{margin-left:6px;color:var(--ink-dim);font-size:11.5px;font-weight:600;}
  .card-heart-button{align-self:flex-start;border:0;background:transparent;padding:0;min-height:28px;cursor:pointer;}

  .field-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.03em;color:var(--ink-faint);margin-bottom:8px;}
  .chip-row{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{border:1px solid var(--rule-strong);background:var(--panel-raised);color:var(--ink-dim);font-size:13px;padding:10px 15px;border-radius:20px;cursor:pointer;min-height:38px;display:inline-flex;align-items:center;}
  .chip.selected{background:rgba(146,168,127,0.18);border-color:var(--action);color:var(--ink);}
  .heart-picker{display:flex;gap:10px;justify-content:center;padding:8px 0;}
  .heart-picker svg{width:34px;height:34px;cursor:pointer;}
  .note-box{background:var(--panel-raised);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--ink);min-height:64px;font-family:'Work Sans',sans-serif;width:100%;resize:none;}
  .note-box::placeholder{color:var(--ink-faint);}
  .back{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);cursor:pointer;letter-spacing:0.05em;}

  .progress-dots{display:flex;gap:6px;justify-content:center;padding:2px 0;}
  .progress-dots div{width:16px;height:4px;border-radius:2px;background:var(--rule-strong);}
  .progress-dots div.done{background:var(--action);}
  .progress-dots div.current{background:var(--action);}
  .pulse-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 6px;}
  .pulse-actions{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:0.05em;margin-top:auto;padding-top:10px;}
  .pulse-actions span{cursor:pointer;}
  .caption{font-size:12px;color:var(--ink-faint);line-height:1.5;text-align:center;}
  .modal-backdrop{position:absolute;inset:0;background:rgba(20,15,22,0.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-radius:22px;display:flex;align-items:flex-end;z-index:10;}
  .modal{background:var(--panel);border-top:1px solid var(--rule-strong);border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom, 0px));width:100%;max-height:88%;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
  input[type=text]{background:var(--panel-raised);border:1px solid var(--rule);border-radius:10px;padding:11px 12px;color:var(--ink);font-family:'Work Sans',sans-serif;font-size:14px;width:100%;}
  input[type=text]::placeholder{color:var(--ink-faint);}
  /* Micro-interactions: real tap feedback, not just decoration */
  .row, .btn, .chip, .nav button, .fab, [role="button"]{
    transition: transform 0.1s ease, opacity 0.1s ease;
  }
  .row:active, .btn:active, .chip:active, .nav button:active, [role="button"]:active{
    transform: scale(0.96);
    opacity: 0.85;
  }

  /* Screen transitions - only fires on actual view changes, handled in JS */
  .screen-enter{ animation: screenIn 0.22s ease; }
  @keyframes screenIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* Accessibility: visible focus for keyboard and screen-reader users */
  .row:focus-visible, .btn:focus-visible, .chip:focus-visible,
  .nav button:focus-visible, [role="button"]:focus-visible{
    outline: 2px solid var(--action);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
  }

  @media (min-width:769px){
    html,body{height:auto;min-height:100%;}
    body{display:block;min-height:0;padding:0 24px;}
    .phone{
      width:100%;
      max-width:1180px;
      height:auto;
      min-height:0;
      margin:0 auto;
      padding:0;
      overflow:visible;
      background:transparent;
      border:0;
      border-radius:0;
      box-shadow:none;
    }
    .screen{
      display:grid;
      grid-template-rows:auto auto;
      min-height:0;
      overflow:visible;
      background:transparent;
      border-radius:0;
    }
    .screen-content{
      grid-row:2;
      width:100%;
      min-height:0;
      overflow:visible;
      padding:32px 24px 64px;
    }
    .nav{
      grid-row:1;
      position:sticky;
      top:0;
      z-index:20;
      justify-content:flex-start;
      gap:4px;
      padding:10px 80px 10px 24px;
      border-top:0;
      border-bottom:1px solid var(--rule);
      background:rgba(30,20,36,.92);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .nav button{
      flex:0 0 auto;
      min-width:104px;
      min-height:42px;
      padding:8px 12px;
      flex-direction:row;
      gap:7px;
      font-size:12px;
    }
    .nav button span{font-size:15px;}
    .fab{
      position:absolute;
      top:9px;
      right:24px;
      bottom:auto;
      z-index:21;
      width:44px;
      height:44px;
    }
    .people-list{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .people-list .ring-label,.people-list .empty-state{grid-column:1/-1;}
    .people-list .empty-state{text-align:left;padding:8px 0;}
    .people-list .row{
      align-items:flex-start;
      padding:16px;
      background:var(--panel-raised);
      border:1px solid var(--rule);
    }
    .modal-backdrop{
      position:fixed;
      border-radius:0;
      align-items:center;
      justify-content:center;
      padding:24px;
    }
    .modal{
      max-width:560px;
      max-height:calc(100vh - 48px);
      border:1px solid var(--rule-strong);
      border-radius:20px;
      padding:22px;
    }
    .toast{
      position:fixed;
      left:50%;
      right:auto;
      bottom:24px;
      width:min(520px,calc(100% - 48px));
      transform:translateX(-50%);
    }
  }

  @media (min-width:1100px){
    .people-list{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
.toast{position:absolute;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(78px + env(safe-area-inset-bottom, 0px));z-index:30;background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.toast button{border:0;background:transparent;color:var(--action-ink);font:600 13px 'Work Sans',sans-serif;text-decoration:underline;min-height:36px;cursor:pointer;}
.app-update{position:fixed;z-index:100;left:max(12px, env(safe-area-inset-left, 0px));right:max(12px, env(safe-area-inset-right, 0px));bottom:calc(12px + env(safe-area-inset-bottom, 0px));max-width:456px;margin:0 auto;background:var(--ink);color:var(--bg);border-radius:16px;padding:13px 14px;box-shadow:0 12px 36px rgba(0,0,0,.45);display:flex;align-items:center;gap:12px;}
.app-update div{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;font-size:13px;}
.app-update span{font-size:11px;opacity:.75;}
.app-update button{border:0;border-radius:10px;background:var(--action);color:var(--action-ink);padding:10px 12px;min-height:40px;font-weight:700;white-space:nowrap;}
.app-update button:disabled{opacity:.7;}
.offline-indicator{position:fixed;z-index:90;top:calc(8px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:7px 11px;border:1px solid rgba(212,168,87,.45);border-radius:999px;background:rgba(30,20,36,.94);color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.25);font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.01em;text-align:center;white-space:nowrap;}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,label.btn:focus-within{outline:2px solid var(--action);outline-offset:2px;}
@media (min-width:769px){
  .toast{position:fixed;left:50%;right:auto;bottom:24px;width:min(520px,calc(100% - 48px));transform:translateX(-50%);}
}