/* Source: Claude Design handoff bundle (claude.ai/design) — テニス調整くん North Star. Imported 2026-06-15. */
/* テニス調整くん — shared tokens & base (mobile, lime + court green) */
:root{
  --lime:#C7ED45; --lime-bright:#D6F45A; --lime-deep:#A9D62E;
  --court:#14532D; --court-mid:#1E7D3C; --ink:#16241B;
  --muted:#5C6B5E; --faint:#8A988C;
  --bg:#FBFDF6; --soft:#F1F8E6; --soft2:#EAF4DA; --line:#E7EFD9; --white:#FFFFFF;
  --maybe:#D99A1C; --maybe-bg:#FBF1D8; --no:#C26B6B; --no-bg:#F7E6E6;
  --gold:#E0B341; --silver:#AAB4B0; --bronze:#C8895A;
  --radius:20px; --radius-sm:14px; --cta-radius:16px;
  --shadow-card:0 1px 2px rgba(20,83,45,.05), 0 10px 30px -12px rgba(20,83,45,.16);
  --shadow-cta:0 8px 22px -6px rgba(150,200,40,.6), 0 2px 4px rgba(20,83,45,.12);
  --font-jp:"Zen Kaku Gothic New", system-ui, sans-serif;
  --font-num:"Outfit", system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font-jp);color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #1E7D3C 0%, #14532D 55%, #0E3D22 100%);
  min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.10;
  background-image:
    linear-gradient(to right, transparent 49.6%, #fff 49.6%, #fff 50.4%, transparent 50.4%),
    linear-gradient(to bottom, transparent 23%, #fff 23%, #fff 23.5%, transparent 23.5%),
    linear-gradient(to bottom, transparent 76.5%, #fff 76.5%, #fff 77%, transparent 77%);
  background-size:100% 100%;
}
.device{
  position:relative;width:100%;max-width:430px;min-height:100dvh;
  background:var(--bg);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
}
@media(min-width:480px){
  body{padding:28px 0;align-items:center;}
  .device{min-height:auto;border-radius:38px;outline:9px solid #0c2c19;outline-offset:-1px;}
}

/* sticky header */
.head{
  position:sticky;top:0;z-index:20;background:rgba(251,253,246,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:16px 20px;display:flex;align-items:center;gap:13px;
}
.head .back{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;color:var(--court);flex:none;text-decoration:none;transition:transform .12s ease;
}
.head .back:active{transform:scale(.93);}
.head .ht{font-weight:900;font-size:18px;color:var(--court);letter-spacing:.01em;}
.head .ht small{display:block;font-weight:500;font-size:11px;color:var(--faint);margin-top:2px;}
.head .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.head .ball{width:26px;height:26px;}
.step-tag{font-family:var(--font-num);font-weight:700;font-size:11px;color:var(--court-mid);background:var(--soft);border-radius:999px;padding:5px 10px;}

/* circle chip */
.circlechip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--court-mid);
  background:var(--soft);border:1px solid var(--soft2);padding:5px 11px 5px 9px;border-radius:999px;}
.circlechip .ball{width:16px;height:16px;}

/* section header */
.sec-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--faint);letter-spacing:.06em;margin-bottom:12px;}
.sec-h .n{margin-left:auto;font-family:var(--font-num);font-weight:700;font-size:11px;color:var(--court-mid);background:var(--soft);border-radius:999px;padding:3px 9px;}

/* primary cta */
.cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,var(--lime-bright),var(--lime));color:var(--court);
  font-family:var(--font-jp);font-weight:900;font-size:17px;letter-spacing:.02em;
  border:none;border-radius:var(--cta-radius);padding:17px;box-shadow:var(--shadow-cta);cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.cta:hover{filter:brightness(1.03);}
.cta:active{transform:translateY(1px) scale(.995);}
.cta[disabled]{filter:grayscale(.4) brightness(.97);opacity:.55;cursor:not-allowed;box-shadow:none;}

/* ghost / secondary button */
.btn-ghost{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  border:1px solid var(--line);background:var(--white);color:var(--court);border-radius:13px;padding:14px;
  font-family:var(--font-jp);font-weight:700;font-size:14px;cursor:pointer;transition:background .14s ease;
}
.btn-ghost:hover{background:var(--soft);}

/* avatar */
.av{border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-family:var(--font-num);font-weight:800;}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--court);color:#fff;
  padding:14px 22px;border-radius:14px;font-weight:700;font-size:14px;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;display:flex;align-items:center;gap:9px;max-width:88%;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .ok{width:20px;height:20px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none;}