:root{--web-ink:#f7f1fa;--web-muted:#c9bdce;--web-panel:rgba(255,255,255,.09);--web-border:rgba(255,255,255,.15);--web-violet:#a56ab2;--web-rose:#dc6388;--web-shadow:0 18px 48px rgba(0,0,0,.25)}
html.web-polished{font-family:"Yu Gothic UI","BIZ UDPGothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
html.web-polished *{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#9c72aa rgba(255,255,255,.08)}
html.web-polished *::-webkit-scrollbar{width:10px;height:10px}html.web-polished *::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}html.web-polished *::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:10px;background:linear-gradient(#ad7ab5,#76508f);background-clip:padding-box}
html.web-polished button,html.web-polished input,html.web-polished select,html.web-polished textarea{font:inherit}
html.web-polished button,html.web-polished a{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,background-color .16s ease}
html.web-polished button:not(:disabled):hover,html.web-polished a:hover{filter:brightness(1.06)}html.web-polished button:not(:disabled):active,html.web-polished a:active{transform:translateY(1px)}
html.web-polished button:focus-visible,html.web-polished a:focus-visible,html.web-polished input:focus-visible,html.web-polished select:focus-visible,html.web-polished textarea:focus-visible{outline:3px solid rgba(200,126,210,.5);outline-offset:3px}
html.web-polished input,html.web-polished select,html.web-polished textarea{border-radius:11px}
.web-home-button{position:fixed;top:14px;right:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(43,28,54,.9);color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(12px)}
@media(max-width:640px){.web-home-button{top:auto;right:12px;bottom:12px;padding:10px 13px}.web-home-button span{display:none}}
@media(max-width:480px){html.web-polished body:has(.login-container){padding:14px;overflow-x:hidden}html.web-polished .login-container{width:100%;max-width:calc(100vw - 28px);padding:36px 22px;border-radius:18px}html.web-polished .login-container .logo h1{max-width:100%;font-size:17px!important;line-height:1.45;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}html.web-polished .login-container .logo p{line-height:1.55}}
@media(prefers-reduced-motion:reduce){html.web-polished *,html.web-polished *::before,html.web-polished *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Card workspaces */
html[data-page="78cards.html"] body,html[data-page="234cards.html"] body{background:linear-gradient(145deg,#17111f,#271b31)!important;color:#f8f2fa!important}
html[data-page="78cards.html"] .window-header,html[data-page="234cards.html"] .window-header,html[data-page="oracle.html"] .window-header,html[data-page="compatibility.html"] .window-header,html[data-page="western_astrology.html"] .window-header,html[data-page$="_explanation.html"] .window-header{position:sticky!important;top:0;z-index:1000;padding:13px 22px!important;background:linear-gradient(90deg,#30203c,#62446e)!important;border:0!important;box-shadow:0 7px 22px rgba(0,0,0,.22)}
html[data-page="78cards.html"] .window-title,html[data-page="234cards.html"] .window-title,html[data-page="oracle.html"] .window-title,html[data-page="compatibility.html"] .window-title,html[data-page="western_astrology.html"] .window-title,html[data-page$="_explanation.html"] .window-title{font-size:17px!important;letter-spacing:.07em}
html[data-page="78cards.html"] #main-container,html[data-page="234cards.html"] #main-container{max-width:none!important;margin:0!important;padding:14px 18px 24px!important}
html[data-page="78cards.html"] #controls,html[data-page="234cards.html"] #controls{position:sticky;top:50px;z-index:900;margin:0 0 14px!important;padding:12px!important;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(34,24,43,.88);box-shadow:0 10px 28px rgba(0,0,0,.24);backdrop-filter:blur(14px)}
html[data-page="78cards.html"] #controls button,html[data-page="234cards.html"] #controls button,html[data-page="78cards.html"] #controls select,html[data-page="234cards.html"] #controls select{min-height:40px;padding:9px 13px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:11px!important;background:linear-gradient(135deg,#76508f,#a45177)!important;color:#fff!important;font-weight:700;box-shadow:0 5px 13px rgba(0,0,0,.18)}
html[data-page="78cards.html"] #controls select,html[data-page="234cards.html"] #controls select{background:#fff!important;color:#33233d!important}
html[data-page="78cards.html"] #spread,html[data-page="234cards.html"] #spread{border:1px solid #ded7e5!important;border-radius:18px!important;background:#fff!important;box-shadow:inset 0 0 30px rgba(69,45,83,.06),0 15px 36px rgba(0,0,0,.18)!important}

/* Oracle */
html[data-page="oracle.html"] body{background:radial-gradient(circle at 80% 10%,#eadff3,transparent 36%),linear-gradient(145deg,#f8f3fa,#e8f1f0)!important}html[data-page="oracle.html"] .content{padding:30px clamp(15px,4vw,48px)!important}html[data-page="oracle.html"] .content>p{max-width:720px;margin:0 auto 18px;color:#6f6275}html[data-page="oracle.html"] .content>button,html[data-page="oracle.html"] .content>select{min-height:42px;margin:5px;padding:9px 15px;border:1px solid rgba(94,65,111,.2);border-radius:11px}html[data-page="oracle.html"] .content>button{background:linear-gradient(135deg,#76508f,#c2547d);color:#fff;font-weight:700;box-shadow:0 7px 18px rgba(88,48,103,.18)}html[data-page="oracle.html"] #oracle-spread{max-width:1100px;margin:25px auto!important}

/* User cards */
html[data-page="user_cards.html"] body{background:radial-gradient(circle at 10% 0%,#4c325c,transparent 35%),linear-gradient(145deg,#19131f,#243039)!important}html[data-page="user_cards.html"] .header{position:sticky;top:0;z-index:100;background:rgba(38,25,47,.88)!important;backdrop-filter:blur(15px);box-shadow:0 8px 24px rgba(0,0,0,.24)}html[data-page="user_cards.html"] .main-content{max-width:1200px!important;padding:34px 22px!important}html[data-page="user_cards.html"] .tabs{padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06)}html[data-page="user_cards.html"] .section{border:1px solid rgba(255,255,255,.13)!important;border-radius:18px!important;background:rgba(255,255,255,.08)!important;box-shadow:0 13px 34px rgba(0,0,0,.2)!important}html[data-page="user_cards.html"] .upload-area{border-radius:16px!important;background:rgba(255,255,255,.05)!important}html[data-page="user_cards.html"] .spread-area{border-radius:18px!important;background:radial-gradient(circle,#4b3062,#21172c 72%)!important;box-shadow:inset 0 0 45px rgba(0,0,0,.3)}

/* Forms and results */
html[data-page="compatibility.html"] body,html[data-page="western_astrology.html"] body{background:radial-gradient(circle at 8% 0%,#f0e2f5,transparent 34%),linear-gradient(145deg,#faf7fb,#eaf2f1)!important}html[data-page="compatibility.html"] .content,html[data-page="western_astrology.html"] .content{padding:30px clamp(14px,4vw,46px)!important}html[data-page="compatibility.html"] .input-row,html[data-page="compatibility.html"] .matrix-section,html[data-page="western_astrology.html"] .panel,html[data-page="western_astrology.html"] .reference-box{border:1px solid rgba(92,65,109,.15)!important;border-radius:15px!important;background:rgba(255,255,255,.8)!important;box-shadow:0 9px 25px rgba(54,35,65,.08)}html[data-page="compatibility.html"] button,html[data-page="western_astrology.html"] button{border-radius:11px!important;background:linear-gradient(135deg,#76508f,#b45178)!important;color:#fff!important;box-shadow:0 6px 15px rgba(76,44,91,.16)}html[data-page="compatibility.html"] #result,html[data-page="compatibility.html"] [id^="result"],html[data-page="western_astrology.html"] .result-panel{border-radius:16px!important;background:rgba(255,255,255,.84)!important}

/* Guides */
html[data-page$="_explanation.html"] body{background:radial-gradient(circle at 85% 0%,#eee3f2,transparent 34%),linear-gradient(145deg,#faf8fb,#edf3f1)!important;color:#32283a!important}html[data-page$="_explanation.html"] .content{max-width:980px;height:auto!important;min-height:calc(100vh - 52px);margin:0 auto;padding:34px clamp(18px,5vw,58px)!important;text-align:left!important}html[data-page$="_explanation.html"] .content h1,html[data-page$="_explanation.html"] .content h2,html[data-page$="_explanation.html"] .content h3{color:#5d3c69}html[data-page$="_explanation.html"] .content table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid rgba(93,63,106,.14);border-radius:14px;background:#fff;box-shadow:0 10px 25px rgba(50,34,58,.08)}html[data-page$="_explanation.html"] .content th{background:#745087!important;color:#fff!important}html[data-page$="_explanation.html"] .content td,html[data-page$="_explanation.html"] .content th{padding:11px 13px!important;border-color:#eee5f0!important}

/* Account, purchase, and admin surfaces */
html[data-page="profile.html"] body,html[data-page="change-password.html"] body,html[data-page="contact.html"] body,html[data-page="purchase.html"] body,html[data-page="subscription.html"] body,html[data-page="admin.html"] body,html[data-page="writer.html"] body{background:radial-gradient(circle at 12% 0%,#4c325b,transparent 32%),radial-gradient(circle at 90% 5%,#194654,transparent 30%),linear-gradient(145deg,#17121e,#1c2730)!important;background-attachment:fixed!important}html[data-page="profile.html"] .profile-container,html[data-page="change-password.html"] .container,html[data-page="contact.html"] .container{border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;box-shadow:0 22px 55px rgba(0,0,0,.3)!important}html[data-page="purchase.html"] .main-content,html[data-page="subscription.html"] .main-content,html[data-page="admin.html"] .main-content,html[data-page="writer.html"] .main-content{max-width:1200px!important}html[data-page="purchase.html"] .plan-card,html[data-page="subscription.html"] .plan-card,html[data-page="purchase.html"] .all-access,html[data-page="subscription.html"] .all-access,html[data-page="admin.html"] .stat-card,html[data-page="admin.html"] .section{border:1px solid rgba(255,255,255,.14)!important;border-radius:18px!important;background:rgba(255,255,255,.09)!important;box-shadow:0 13px 34px rgba(0,0,0,.2)!important;backdrop-filter:blur(12px)}html[data-page="purchase.html"] .plan-btn,html[data-page="subscription.html"] .plan-btn{border-radius:11px!important;box-shadow:0 6px 16px rgba(0,0,0,.2)}

@media(max-width:768px){html[data-page="78cards.html"] #controls,html[data-page="234cards.html"] #controls{top:48px!important;padding:7px!important}html[data-page="78cards.html"] #spread,html[data-page="234cards.html"] #spread{background:#fff!important}html[data-page="compatibility.html"] .content,html[data-page="western_astrology.html"] .content{padding:18px 10px!important}html[data-page$="_explanation.html"] .content{padding:24px 15px!important;overflow-x:auto}}
html[data-page="oracle.html"] body{display:block!important;width:100%!important}html[data-page="oracle.html"] .window-header{width:100%!important}html[data-page="oracle.html"] #oracle-spread{min-height:230px;padding:22px!important;border:1px dashed rgba(106,75,122,.24);border-radius:18px!important;background:rgba(255,255,255,.38)!important;box-shadow:inset 0 0 35px rgba(78,48,91,.06)}

/* スマホ日本語入力: フリック中の拡大・誤タップ・キーボード被りを抑える */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-bottom: min(42vh, 320px);
  }
  body {
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea,
  select,
  [contenteditable="true"] {
    min-height: 48px !important;
    box-sizing: border-box;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    touch-action: pan-x pan-y !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    scroll-margin-top: 84px;
    scroll-margin-bottom: min(42vh, 320px);
  }
  textarea,
  [contenteditable="true"] {
    min-height: 104px !important;
    resize: vertical;
  }
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    touch-action: manipulation;
  }
  input:focus,
  textarea:focus,
  select:focus,
  [contenteditable="true"]:focus {
    outline: 3px solid rgba(185,111,195,.32) !important;
    outline-offset: 2px;
  }
}