/* Editorial desk design layer. The public blog keeps its own presentation. */
:root {
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 14px;
  color: #eaf0f7;
  background: #0c131d;
  color-scheme: dark;
  font-synthesis: none;
  --canvas: #0c131d;
  --sidebar: #101923;
  --surface: #151f2b;
  --surface-raised: #1a2735;
  --surface-soft: #111c28;
  --line: #2a394a;
  --line-strong: #3a5063;
  --text: #eaf0f7;
  --muted: #a6b6c5;
  --subtle: #8395a6;
  --accent: #79c2ff;
  --accent-strong: #207ac7;
  --mint: #57d7b5;
  --amber: #f1bd68;
  --rose: #f48e9d;
  --radius: 16px;
  --shadow: 0 12px 34px rgba(1, 7, 13, .16);
}

html { min-width: 320px; }
body { background: var(--canvas); color: var(--text); line-height: 1.55; }
button, input, select, textarea { font-family: inherit; }
button, .card-actions a, .small-button {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #1c2a38;
  color: var(--text);
  font-weight: 650;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
button:hover, .card-actions a:hover, .small-button:hover {
  background: #26394a;
  border-color: #62839b;
  text-decoration: none;
}
button:active, .card-actions a:active { transform: translateY(1px); }
button.primary {
  background: linear-gradient(180deg, #328fda, #2074bf);
  border-color: #469bdd;
  color: white;
  box-shadow: 0 5px 15px rgba(18, 104, 187, .2);
}
button.primary:hover { background: linear-gradient(180deg, #49a3e9, #2883cf); }
button.danger { color: #ff9da8; border-color: #804e59; background: #302029; }
button.danger:hover { background: #422b35; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
input, select, textarea {
  border: 1px solid #394b5c;
  border-radius: 10px;
  background: #0f1a25;
  color: var(--text);
  line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: #8092a3; }
input[type=checkbox] { accent-color: #3b9be1; }
a { color: var(--accent); }

/* App frame and hierarchy */
.admin-shell {
  max-width: none;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 242px minmax(0, 1fr);
  grid-template-rows: 76px minmax(0, 1fr);
}
.admin-head {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 76px;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 23, 33, .97);
  backdrop-filter: blur(14px);
}
.brand { gap: 12px; }
.brand-mark {
  width: 39px;
  height: 39px;
  border: 1px solid #3d6990;
  border-radius: 12px;
  background: linear-gradient(145deg, #214d70, #112a40);
  color: #a5daff;
  font-size: 24px;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.brand strong { font-size: 16px; letter-spacing: .025em; font-weight: 750; }
.brand small { color: var(--subtle); font-size: 11px; letter-spacing: .04em; }
.head-controls { gap: 18px; }
.head-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.status-dot { width: 7px; height: 7px; margin: 0; background: var(--mint); box-shadow: 0 0 0 4px rgba(87,215,181,.1); }
.admin-nav {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 76px;
  align-self: start;
  height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 27px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: var(--sidebar);
}
.admin-nav::before {
  content: "WORKSPACE";
  padding: 0 13px 12px;
  color: #71879a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}
.admin-nav a {
  display: flex;
  align-items: center;
  min-height: 43px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #b0c0ce;
  font-size: 13px;
  font-weight: 660;
  letter-spacing: .01em;
}
.admin-nav a:hover { background: #1c2b39; color: #e8f3ff; }
.admin-nav a.active {
  border-color: #315d7e;
  background: linear-gradient(90deg, #163a57, #162c40);
  color: #bfe2ff;
  box-shadow: inset 3px 0 #63baff;
}
.admin-main {
  grid-column: 2;
  grid-row: 2;
  width: min(100%, 1440px);
  min-width: 0;
  padding: 38px clamp(24px, 4vw, 62px) 100px;
}
.page-head { align-items: center; gap: 22px; margin-bottom: 28px; }
.page-head h1 {
  margin: 0 0 8px;
  color: #f5f8fc;
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 760;
  line-height: 1.28;
  letter-spacing: -.025em;
}
.page-head .muted { max-width: 70ch; }
.eyebrow { margin-bottom: 9px; color: #77b8ed; font-size: 10px; letter-spacing: .2em; }
.muted { color: var(--muted); line-height: 1.7; }
.meta { color: var(--subtle); line-height: 1.6; }
.small { font-size: 12px; }
.date-pill {
  border: 1px solid #42607a;
  background: #1a3045;
  color: #c5e2f9;
  padding: 9px 14px;
  font-weight: 700;
}
#dashboard .page-head {
  position: relative;
  overflow: hidden;
  min-height: 153px;
  padding: 26px 30px;
  border: 1px solid #31526c;
  border-radius: 20px;
  background: radial-gradient(circle at 92% 10%, rgba(72,154,209,.17), transparent 30%), linear-gradient(115deg, #183247, #152330 70%);
  box-shadow: var(--shadow);
}
#dashboard .page-head::after {
  content: "";
  position: absolute;
  right: 25%;
  bottom: -65px;
  width: 240px;
  height: 180px;
  border: 1px solid rgba(136, 205, 246, .08);
  border-radius: 50%;
  pointer-events: none;
}
#dashboard .page-head h1 { font-size: clamp(30px, 3vw, 40px); }

/* Data surfaces */
.stats { gap: 14px; margin-bottom: 24px; }
.stat {
  min-height: 126px;
  padding: 19px 20px;
  border: 1px solid #33485b;
  border-radius: 15px;
  background: linear-gradient(160deg, #192938, #15212e);
  box-shadow: var(--shadow);
}
.stat:nth-child(2) { background: linear-gradient(160deg, #183139, #15232c); }
.stat:nth-child(3) { background: linear-gradient(160deg, #2b2938, #1b2230); }
.stat:nth-child(4) { background: linear-gradient(160deg, #2d2b30, #20242d); }
.stat span { color: #b4c4d0; font-size: 12px; font-weight: 700; }
.stat strong {
  margin: 7px 0 5px;
  color: #f6f9fd;
  font-size: clamp(29px, 3vw, 39px);
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.stat small { color: #8fa4b4; font-size: 11px; }
.dashboard-grid { gap: 16px; margin-bottom: 16px; }
.panel, .card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel { padding: 24px; margin-bottom: 18px; }
.card { padding: 20px; }
.panel h2, .section-head h2 { color: #f0f5fa; font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.panel > h2 { margin-bottom: 12px; }
.section-head { margin-bottom: 17px; }
.section-head a { font-size: 12px; font-weight: 750; }
.row-item { gap: 14px; padding: 17px 0; border-color: #2b3b4a; }
.row-item:first-child { padding-top: 7px; }
.row-item:last-child { padding-bottom: 5px; }
.row-title { color: #eaf2f9; font-size: 13px; font-weight: 730; }
.row-sub { color: var(--subtle); font-size: 11px; }
.score strong { font-variant-numeric: tabular-nums; }
.score-track { background: #283a49; }
.score-track i { background: linear-gradient(90deg, #549fdb, #9bd6ff); }
.score.low .score-track i { background: var(--rose); }
.tiny-label { color: var(--subtle); }
.candidate-card { border-color: var(--line); }
.candidate-card:last-child { border-bottom: 0; }
.cards { gap: 16px; }
.cards.compact { gap: 12px; }
.empty {
  margin: 4px 0;
  padding: 38px 18px;
  border: 1px dashed #355065;
  border-radius: 12px;
  background: #12202d;
  color: #a9bac8;
  line-height: 1.6;
}
.quick-links { gap: 10px; }
.quick-links a, .shortcut, .billing-links a {
  border-color: #3a5265;
  border-radius: 12px;
  background: #172838;
  color: #deedfa;
}
.quick-links a:hover, .shortcut:hover, .billing-links a:hover { background: #21394b; border-color: #64849a; }
.quick-links span, .shortcut-icon { color: #9bd5ff; }
.site-shortcuts { gap: 16px; }
.shortcut { min-height: 116px; padding: 20px; }
.shortcut strong { font-size: 17px; }
.shortcut > span:last-child { color: var(--muted); }
.content-card, .edit-box, .body-preview, .brand-upload-grid > div, .operation-row, .usage-card {
  border-color: #344858;
  background: var(--surface-soft);
}
.content-card { border-radius: 12px; }
.body-preview { color: #c8d5e0; }
.brand-upload-grid > div { border-radius: 12px; }
.operation-row { min-height: 76px; }
.operation-row strong { color: #eaf2f9; }
.operation-row small, .usage-card small, .usage-card span { color: var(--muted); }
.operation-row input[type=checkbox] {
  appearance: none;
  position: relative;
  width: 46px;
  height: 28px;
  flex: none;
  border: 1px solid #647789;
  border-radius: 99px;
  background: #334354;
  cursor: pointer;
}
.operation-row input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #edf4fa;
  transition: transform .16s ease;
}
.operation-row input[type=checkbox]:checked { background: #1d84b9; border-color: #69c4e4; }
.operation-row input[type=checkbox]:checked::after { transform: translateX(18px); }
.usage-card strong { color: #f3f7fb; font-variant-numeric: tabular-nums; }
.readiness-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #172939; }
.readiness-summary-copy { color: #d9e9f5; font-weight: 700; }
.readiness-summary button { flex: none; }
.readiness-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.readiness-card { margin: 0; min-height: 152px; display: flex; flex-direction: column; align-items: flex-start; }
.readiness-card .muted { margin-bottom: 14px; }
.readiness-card button, .readiness-card > a { margin-top: auto; }
.readiness-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.readiness-top h2 { margin: 0; }

/* Forms and status */
.grid-form { gap: 18px; }
.grid-form label { gap: 8px; color: #c5d2dd; font-size: 12px; font-weight: 700; }
.grid-form input:not([type=checkbox]), .grid-form select, .grid-form textarea { min-height: 45px; }
.grid-form textarea { padding: 13px; }
.grid-form fieldset { border-color: var(--line-strong); padding: 14px; }
.check-row { gap: 15px; }
.check-row label { color: #cbd6df; }
.toolbar { gap: 10px; margin-bottom: 20px; }
.toolbar label { color: var(--muted); font-weight: 700; }
.legend { color: var(--muted); }
.badge { padding: 5px 10px; letter-spacing: .02em; }
.badge.pass, .badge.approved { background: #153e36; color: #8de8c8; }
.badge.review, .badge.waiting { background: #493620; color: #ffd18e; }
.badge.block, .badge.rejected { background: #4b2935; color: #ffabb6; }
.badge.draft, .badge.ready { background: #1b3b56; color: #acd9ff; }
.badge.neutral { background: #263540; color: #bfccd5; }
.pill-list span { background: #243543; color: #bacbd9; }
.card-actions, .form-actions { gap: 9px; }
.card-actions a { padding: 9px 13px; }
#notice.show { border: 1px solid #3b806e; background: #173c35; color: #bbf4df; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
#notice.error { border-color: #8c5161; background: #4c2935; color: #ffe1e6; }

/* Login */
.login-page { background: radial-gradient(circle at 50% 0%, #213f56 0, var(--canvas) 52%); }
.login-card {
  border-color: #3a5265;
  border-radius: 20px;
  background: #14212e;
  box-shadow: 0 25px 75px rgba(0,0,0,.25);
}
.login-card h1 { color: #f4f9fc; font-size: 28px; }
.login-card label { color: #c7d5e0; }
.login-card button { min-height: 50px; }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .admin-nav { padding: 21px 9px; }
  .admin-main { padding: 30px 24px 90px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readiness-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { font-size: 15px; }
  .admin-shell { display: block; }
  .admin-head { height: 62px; padding: 0 16px; }
  .admin-nav { display: none; }
  .admin-main { width: 100%; padding: 22px 15px calc(110px + env(safe-area-inset-bottom)); }
  .brand-mark { width: 36px; height: 36px; font-size: 22px; }
  .brand strong { font-size: 15px; }
  .brand small { color: #9bc7e8; }
  .page-head { margin-bottom: 21px; }
  .page-head h1 { font-size: 26px; }
  #dashboard .page-head { min-height: 142px; padding: 21px 20px; border-radius: 16px; }
  #dashboard .page-head h1 { font-size: 29px; }
  .date-pill { margin-top: 14px; }
  .stats { gap: 10px; margin-bottom: 16px; }
  .stat { min-height: 113px; padding: 15px; border-radius: 13px; }
  .stat strong { font-size: 29px; }
  .stat small { line-height: 1.35; }
  .dashboard-grid .panel { margin-bottom: 14px; }
  .panel { padding: 18px; margin-bottom: 14px; }
  .card { padding: 17px; }
  .section-head { gap: 10px; }
  .section-head h2 { font-size: 16px; }
  .row-item { padding: 15px 0; }
  .row-title { font-size: 14px; }
  .row-sub { font-size: 11px; }
  .grid-form { gap: 15px; }
  .mobile-quick-actions { gap: 9px; margin-bottom: 17px; }
  .mobile-quick-actions button { min-height: 48px; }
  .site-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .site-shortcuts .shortcut { min-height: 112px; padding: 13px; gap: 5px; }
  .site-shortcuts .shortcut-icon { font-size: 22px; }
  .site-shortcuts .shortcut strong { font-size: 14px; line-height: 1.3; }
  .site-shortcuts .shortcut > span:last-child { font-size: 11px; line-height: 1.35; }
  .mobile-nav {
    border-top: 1px solid #3a4d5b;
    background: rgba(15, 27, 38, .98);
    box-shadow: 0 -12px 30px rgba(0,0,0,.2);
  }
  .mobile-nav a, .mobile-nav button { color: #9fb1c0; }
  .mobile-nav a.active, .mobile-nav button.active { background: #1a3c58; color: #b9e2ff; }
  .mobile-menu-sheet { border-color: #466075; background: #182735; }
  .mobile-menu-sheet > a { border-color: #354b5d; color: #dfebf4; }
  .mobile-menu-sheet > a.active { color: #9dd7ff; }
  .operation-row { min-height: 78px; padding: 13px; }
  .readiness-summary { align-items: stretch; flex-direction: column; padding: 15px; }
  .readiness-summary button { width: 100%; }
  .readiness-card { min-height: 0; }
  .operation-row input[type=checkbox] { width: 46px; height: 28px; }
  #notice.show { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .admin-main { padding-left: 12px; padding-right: 12px; }
  .panel { padding: 15px; }
  .stat { padding: 13px; }
  .stat strong { font-size: 26px; }
  .mobile-nav small { font-size: 9px; }
}

@media (max-width: 360px) {
  .site-shortcuts { grid-template-columns: 1fr; }
  .site-shortcuts .shortcut { display: flex; align-items: center; min-height: 62px; padding: 11px 13px; gap: 12px; }
  .site-shortcuts .shortcut-icon { flex: none; font-size: 20px; }
  .site-shortcuts .shortcut > span:last-child { display: none; }
  #sites .section-head { display: block; }
  #sites .section-head .muted { display: block; margin-top: 5px; }
}

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

.carousel-preview { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px; -webkit-overflow-scrolling:touch; }
.carousel-pane { flex:0 0 min(72vw,260px); scroll-snap-align:start; min-width:0; }
.carousel-pane img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:contain; border-radius:14px; border:1px solid #344b5b; }
.carousel-pane button { margin-top:8px; width:100%; min-height:42px; }
.coupon-box { margin-top:14px; display:grid; gap:9px; }
.coupon-box textarea, .coupon-box input[type=url], .coupon-box input[type=datetime-local] { width:100%; max-width:100%; }