:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; background: #f2f5fb; color: #172033; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(100%, 720px); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 4px 16px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; background: #1d4ed8; color: #fff; border-radius: 12px; font-size: 19px; font-weight: 800; box-shadow: 0 5px 14px #1d4ed840; }
h1, h2, p { margin: 0; }
h1 { font-size: 18px; line-height: 1.2; }
h2 { font-size: 17px; }
.brand p, .hint, .muted, small { color: #65718a; font-size: 13px; }
.card { background: #fff; border: 1px solid #e3e8f2; border-radius: 16px; box-shadow: 0 5px 18px #1a29420c; padding: 20px; margin-bottom: 14px; }
.login-card { width: min(100%, 410px); margin: max(15vh, 80px) auto; }
.login-card .brand { margin-bottom: 28px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.retention { color: #68748b; font-size: 12px; }
form { display: grid; gap: 9px; }
label { color: #324059; font-size: 14px; font-weight: 650; }
input[type="password"], input[type="text"], textarea { width: 100%; appearance: none; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #172033; outline: none; }
input:focus, textarea:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px #1d4ed822; }
textarea { resize: vertical; min-height: 86px; line-height: 1.5; }
input[type="file"] { color: #536078; font-size: 13px; }
input[type="file"]::file-selector-button { border: 0; border-radius: 8px; background: #e7eefc; color: #1747ba; font-weight: 650; padding: 8px 10px; margin-right: 8px; }
.primary, .secondary, .text-button { border: 0; border-radius: 10px; font-weight: 700; }
.primary { color: #fff; background: #1d4ed8; padding: 12px 16px; box-shadow: 0 4px 10px #1d4ed836; }
.primary:hover { background: #1a45bf; }.primary:disabled { background: #90a4d7; cursor: wait; }
.secondary { padding: 9px 12px; color: #1747ba; background: #e7eefc; }
.text-button { color: #2854b6; background: transparent; padding: 7px 6px; }
.send { margin-top: 9px; font-size: 16px; }
.segmented, .sound-grid, .chime-grid { display: grid; gap: 8px; }
.segmented { grid-template-columns: 1fr 1fr; }.sound-grid { grid-template-columns: repeat(3, 1fr); }
.segmented label, .sound-grid label, .chime-grid label { position: relative; color: #35425a; font-weight: 500; cursor: pointer; }
.segmented input, .sound-grid input, .chime-grid input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span, .sound-grid span, .chime-grid span { display: grid; min-height: 50px; align-content: center; gap: 3px; padding: 8px 10px; border: 1px solid #d5ddea; border-radius: 10px; background: #fbfcff; text-align: center; }
.segmented input:checked + span, .sound-grid input:checked + span, .chime-grid input:checked + span { color: #1647bd; border-color: #1d4ed8; background: #edf3ff; box-shadow: inset 0 0 0 1px #1d4ed8; }
.sound-grid b, .chime-grid b { font-size: 14px; }.sound-grid small, .chime-grid small { font-size: 11px; line-height: 1.2; }
.chime-grid { grid-template-columns: repeat(3, 1fr); }
.volume-warning { margin: 2px 0; padding: 10px 11px; border: 1px solid #f2c866; border-radius: 10px; color: #8a5312; background: #fff8dd; font-size: 13px; line-height: 1.45; }
.hint { line-height: 1.55; margin: 2px 0 4px; }.hint code { font-family: inherit; color: #2f4f9f; background: #edf3ff; padding: 1px 4px; border-radius: 4px; }
.two-column { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }.two-column > div { display: grid; gap: 6px; }
.optional { color: #758199; font-weight: 400; }.image-preview { position: relative; display: inline-block; width: fit-content; max-width: 180px; margin-top: 2px; }.image-preview img { display: block; width: 180px; max-height: 140px; object-fit: cover; border: 1px solid #d5ddea; border-radius: 10px; }.image-preview button { position: absolute; top: -8px; right: -8px; border: 0; width: 25px; height: 25px; border-radius: 99px; color: #fff; background: #4c596f; line-height: 20px; font-size: 20px; }
.status { min-height: 18px; color: #17663c; font-size: 13px; }.error { color: #b42318; margin-top: 3px; font-size: 13px; }
details { padding: 0; } summary { padding: 18px 20px; color: #2f3d56; cursor: pointer; font-size: 15px; font-weight: 700; } .details-content { padding: 0 20px 20px; }.pairing-code { margin: 12px 0; padding: 12px; border-radius: 10px; background: #162342; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: .13em; text-align: center; }.device-list { margin-top: 12px; display: grid; gap: 8px; }.device { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; background: #f7f9fd; color: #36435a; font-size: 13px; }.device > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }.online { color: #16723c; }.offline { color: #7a8599; }
.history { display: grid; gap: 9px; }.history-item { padding: 11px; border: 1px solid #e5eaf3; border-radius: 10px; }.history-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }.history-text { line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }.badge { flex: 0 0 auto; border-radius: 999px; padding: 3px 7px; color: #2b4da6; background: #eaf0ff; font-size: 11px; font-weight: 700; }.badge.important { color: #a83d12; background: #fff0e9; }.history-meta { color: #6b7891; font-size: 12px; margin-top: 7px; }.volume { color: #65718a; white-space: nowrap; }.volume-low { color: #b26a12; font-weight: 700; white-space: nowrap; }
@media (max-width: 460px) { .shell { padding-left: 12px; padding-right: 12px; }.card { padding: 16px; border-radius: 14px; }.sound-grid { grid-template-columns: 1fr; }.sound-grid span { grid-template-columns: 70px 1fr; text-align: left; align-items: center; min-height: 45px; }.chime-grid { grid-template-columns: 1fr; }.chime-grid span { grid-template-columns: 70px 1fr; text-align: left; align-items: center; min-height: 45px; }.two-column { grid-template-columns: 1fr; }.retention { display: none; } }

/* 页面外观：默认清新蓝；通过 body.theme-crayon 切换蜡笔小新皮肤。 */
:root {
  --page: #eff5ff;
  --paper: rgba(255, 255, 255, .94);
  --paper-soft: #f7faff;
  --ink: #172033;
  --subtle: #67748c;
  --line: #d9e4f2;
  --brand: #2563eb;
  --brand-deep: #1d4ed8;
  --brand-soft: #e7f0ff;
  --sun: #f4bb2b;
  --good: #16803e;
  --bad: #c2382d;
  --hand: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--hand);
  background:
    radial-gradient(circle at 5% 0%, rgba(255,255,255,.85) 0 2px, transparent 3px) 0 0 / 22px 22px,
    radial-gradient(circle at 88% 8%, #d9eaff, transparent 28%),
    linear-gradient(160deg, var(--page), #f8fbff 52%, #eff7ff);
}

body::before,
body::after { position: fixed; z-index: -1; display: block; content: ""; pointer-events: none; }
body::before { top: 17%; left: -140px; width: 230px; height: 230px; border-radius: 48% 52% 41% 59%; background: #bdddff; opacity: .55; }
body::after { right: -155px; bottom: 7%; width: 245px; height: 245px; border-radius: 55% 45% 61% 39%; background: #ffe5a0; opacity: .48; }

.shell { position: relative; width: min(100%, 760px); padding-top: max(28px, env(safe-area-inset-top)); }
.topbar { margin-bottom: 20px; }
h1 { font-size: 20px; letter-spacing: -.02em; }
h2 { font-size: 19px; letter-spacing: -.02em; }

.eyebrow { display: block; margin-bottom: 3px; color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: .13em; line-height: 1.2; }
.brand { gap: 12px; }
.brand-mark { width: 43px; height: 43px; flex-basis: 43px; border: 1px solid rgba(255,255,255,.7); border-radius: 15px 15px 15px 6px; background: linear-gradient(145deg, #4e88ff, var(--brand-deep)); box-shadow: 0 8px 18px #1d4ed842; }
.brand p { margin-top: 2px; color: var(--subtle); }

.card { overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: 0 16px 40px #2d51891c, 0 2px 8px #223b6609; backdrop-filter: blur(12px); }
.compose-card { border-top: 4px solid var(--brand); }
.login-card { width: min(100%, 430px); padding: 27px; }
.login-card .brand { margin-bottom: 18px; }
.card-heading { align-items: flex-start; margin-bottom: 20px; }
.retention { padding: 5px 8px; border-radius: 8px; color: var(--subtle); background: var(--paper-soft); }

.login-note { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0 0 21px; padding: 13px 15px; overflow: hidden; border: 1px solid #d7e7ff; border-radius: 15px; color: #37609d; background: linear-gradient(110deg, #eef6ff, #f8fbff); font-size: 13px; }
.login-note b { color: var(--brand-deep); }
.login-note i { grid-row: 1 / span 2; align-self: center; color: var(--sun); font-size: 21px; font-style: normal; }

input[type="password"], input[type="text"], textarea { padding: 12px 13px; border-color: #c9d7ea; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
input:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px #2563eb2e; background: #fff; }
textarea { min-height: 96px; }
input[type="file"]::file-selector-button { border-radius: 9px; color: var(--brand-deep); background: var(--brand-soft); }

.primary, .secondary, .text-button, .theme-toggle { transition: transform .17s ease, box-shadow .17s ease, background .17s ease; }
.primary:hover:not(:disabled), .secondary:hover, .text-button:hover, .theme-toggle:hover { transform: translateY(-1px); }
.primary:active:not(:disabled), .secondary:active, .text-button:active, .theme-toggle:active { transform: translateY(1px); }
.primary { border-radius: 13px; background: linear-gradient(135deg, #3978f8, var(--brand-deep)); box-shadow: 0 8px 16px #1d4ed83c; }
.secondary { border-radius: 11px; color: var(--brand-deep); background: var(--brand-soft); }
.text-button { border-radius: 9px; color: var(--brand-deep); }
.text-button:hover { background: var(--brand-soft); }

.segmented, .sound-grid { gap: 9px; }
.segmented span, .sound-grid span { min-height: 55px; border-color: #d4dfed; border-radius: 13px; background: #fbfdff; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; }
.segmented label:hover span, .sound-grid label:hover span { transform: translateY(-1px); border-color: #b8cae5; }
.segmented input:checked + span, .sound-grid input:checked + span { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand), 0 4px 10px #2563eb17; }
.hint code { color: var(--brand-deep); background: var(--brand-soft); }
.image-preview img { border: 2px solid #d5e1f0; border-radius: 13px; }
.status { color: var(--good); font-weight: 650; }.status.is-error, .error { color: var(--bad); }

summary { display: flex; align-items: center; padding: 19px 22px; list-style: none; color: var(--ink); }
summary::-webkit-details-marker { display: none; }
summary::after { margin-left: auto; content: "＋"; color: var(--brand); font-size: 20px; font-weight: 500; }
details[open] summary::after { content: "−"; }
.details-content { padding: 0 22px 21px; }
.pairing-code { border-radius: 13px; background: linear-gradient(135deg, #1f3157, #17264a); }
.device { border: 1px solid #e1e9f4; border-radius: 12px; background: var(--paper-soft); }
.history-item { padding: 13px; border-color: #e2eaf4; border-radius: 14px; background: rgba(255,255,255,.64); }
.badge { color: var(--brand-deep); background: var(--brand-soft); }

.theme-toggle { position: fixed; z-index: 5; right: max(15px, calc((100vw - 760px) / 2 + 3px)); bottom: max(15px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px 9px 9px; border: 1px solid #cad9ee; border-radius: 999px; color: var(--ink); background: #fffffff0; box-shadow: 0 9px 24px #2a436b30; backdrop-filter: blur(10px); font-size: 12px; }
.theme-toggle-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--brand-soft); font-size: 15px; }

.theme-character, .shinchan-banner { display: none; }

/* 蜡笔小新皮肤：角色贴纸为本地资源；配色、纸张和手绘线条均由本页 CSS 生成。 */
body.theme-crayon {
  --page: #fff7e9; --paper: #fffdf5; --paper-soft: #fff3d0; --ink: #332822; --subtle: #796b61; --line: #4b392d; --brand: #e94a37; --brand-deep: #c92f26; --brand-soft: #ffe0b8; --sun: #f2bd26; --good: #2d7c56; --bad: #bc2c2d;
  background: repeating-linear-gradient(7deg, transparent 0 12px, #573e2a09 13px 14px), radial-gradient(circle at 18% 7%, #ffde55 0 6px, transparent 7px) 0 0 / 68px 68px, radial-gradient(circle at 92% 17%, #62bce8 0 4px, transparent 5px) 0 0 / 83px 83px, linear-gradient(140deg, #fff8e9, #fff2ca 48%, #fff8e9);
}
body.theme-crayon::before { z-index: -1; top: 9%; left: -104px; width: 212px; height: 228px; border: 4px solid #55add4; border-radius: 45% 55% 36% 64%; background: transparent; box-shadow: 18px 42px 0 -14px #f2bd26, 42px 5px 0 -21px #e94a37; opacity: .47; transform: rotate(-13deg); }
body.theme-crayon::after { z-index: -1; right: -111px; bottom: 8%; width: 210px; height: 210px; border: 4px dashed #e94a37; border-radius: 49% 51% 55% 45%; background: transparent; opacity: .4; transform: rotate(17deg); }
.theme-crayon .eyebrow { color: #d86a20; font-family: "Comic Sans MS", "Microsoft YaHei", sans-serif; letter-spacing: .1em; }
.theme-crayon .brand-mark { border: 2px solid #332822; border-radius: 48% 52% 46% 54%; color: #332822; background: #f2bd26; box-shadow: 3px 4px 0 #332822; font-family: "Comic Sans MS", "Microsoft YaHei", sans-serif; transform: rotate(-4deg); }
.theme-crayon .card { border: 2px solid #403027; border-radius: 19px 23px 18px 22px; background: #fffdf5; box-shadow: 4px 5px 0 #332822cc, 8px 12px 26px #65492e1f; backdrop-filter: none; }
.theme-crayon .compose-card { border-top: 7px solid #e94a37; }
.theme-crayon .login-card { transform: rotate(-.35deg); }
.theme-crayon .login-note { border: 2px dashed #e29b21; color: #725021; background: #fff1b7; transform: rotate(.35deg); }
.theme-crayon .login-note b { color: #d33b2b; }

.theme-crayon input[type="password"], .theme-crayon input[type="text"], .theme-crayon textarea { border: 2px solid #5a493d; border-radius: 12px 14px 11px 13px; color: #332822; background: #fffef8; }
.theme-crayon input:focus, .theme-crayon textarea:focus { border-color: #e94a37; box-shadow: 0 0 0 4px #e94a3733; }
.theme-crayon input[type="file"]::file-selector-button { border: 2px solid #403027; color: #332822; background: #f2bd26; }
.theme-crayon .primary { border: 2px solid #403027; border-radius: 12px 15px 11px 14px; background: #e94a37; box-shadow: 3px 4px 0 #403027; }
.theme-crayon .primary:hover:not(:disabled) { background: #d83b2f; box-shadow: 4px 5px 0 #403027; }
.theme-crayon .secondary { border: 2px solid #403027; color: #332822; background: #f2bd26; box-shadow: 2px 3px 0 #403027; }
.theme-crayon .text-button { color: #9f3028; }.theme-crayon .text-button:hover { background: #ffe6bf; }
.theme-crayon .segmented span, .theme-crayon .sound-grid span { border: 2px solid #5a493d; border-radius: 13px 11px 15px 10px; color: #493a31; background: #fffaf0; }
.theme-crayon .segmented input:checked + span, .theme-crayon .sound-grid input:checked + span { border-color: #403027; color: #332822; background: #ffe98b; box-shadow: inset 0 0 0 1px #403027, 2px 3px 0 #403027b3; }
.theme-crayon .hint code { color: #9f3028; background: #ffe9b1; }.theme-crayon .image-preview img { border: 2px solid #403027; border-radius: 12px 16px 10px 15px; }
.theme-crayon summary::after { color: #e94a37; }.theme-crayon .pairing-code { border: 2px solid #403027; border-radius: 12px 15px 10px 14px; color: #332822; background: #f2bd26; box-shadow: 3px 3px 0 #403027; }
.theme-crayon .device, .theme-crayon .history-item { border: 2px solid #6a5749; border-radius: 12px 15px 10px 14px; color: #493a31; background: #fffaf0; }.theme-crayon .badge { color: #332822; background: #bae4f4; }.theme-crayon .badge.important { color: #8d2821; background: #ffd1bd; }.theme-crayon .retention { color: #6b5544; background: #fff0bb; }
.theme-crayon .theme-toggle { border: 2px solid #403027; color: #332822; background: #fffdf5; box-shadow: 3px 4px 0 #403027; }.theme-crayon .theme-toggle-icon { background: #f2bd26; }

.theme-crayon .theme-character { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 112px; margin: -3px 0 16px; overflow: hidden; border: 2px dashed #e29b21; border-radius: 15px 19px 13px 17px; background: linear-gradient(112deg, #fff2b8, #dff3fb); }
.theme-crayon .theme-character img { position: absolute; right: 13px; bottom: -36px; width: 132px; height: auto; transform: rotate(2deg); filter: drop-shadow(2px 3px 0 #40302766); }
.theme-crayon .theme-character figcaption { position: absolute; left: 15px; top: 32px; max-width: 128px; color: #9f3028; font-family: "Comic Sans MS", "Microsoft YaHei", sans-serif; font-size: 15px; font-weight: 800; line-height: 1.35; }
.theme-crayon .shinchan-banner { position: relative; display: flex; min-height: 65px; align-items: center; margin: -6px 0 15px; padding: 9px 76px 9px 13px; overflow: hidden; border: 2px dashed #e29b21; border-radius: 13px 17px 11px 15px; background: linear-gradient(105deg, #fff1b7, #e7f6fb); color: #6b4731; }
.theme-crayon .shinchan-banner img { position: absolute; right: 6px; bottom: -26px; width: 70px; filter: drop-shadow(1px 2px 0 #40302788); }.theme-crayon .shinchan-banner p { font-size: 13px; line-height: 1.4; }.theme-crayon .shinchan-banner b { color: #d33b2b; }

@media (max-width: 520px) { .card { padding: 18px; border-radius: 18px; }.login-card { padding: 22px; }.theme-crayon .theme-character { height: 104px; }.theme-crayon .theme-character img { width: 122px; }.theme-crayon .theme-character figcaption { left: 13px; top: 29px; font-size: 14px; } }
@media (max-width: 370px) { .theme-toggle { padding-right: 9px; }.theme-toggle #theme-toggle-label { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }