:root {
  color-scheme: light;
  --ink: #302c39;
  --muted: #756f7d;
  --paper: #fffaf5;
  --card: rgba(255,255,255,.84);
  --line: #eadfd8;
  --coral: #ef6a5b;
  --coral-dark: #cf4e43;
  --mint: #4ca989;
  --amber: #e9a23b;
  --shadow: 0 18px 60px rgba(79, 55, 42, .11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-locked { overflow: hidden; }
.auth-gate[hidden] { display: none; }
.auth-gate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: auto; padding: 24px; background: radial-gradient(circle at 14% 10%,rgba(239,106,91,.17),transparent 27rem),radial-gradient(circle at 88% 84%,rgba(76,169,137,.12),transparent 25rem),#f5f0ec; }
.auth-card { width: min(100%,440px); padding: 34px; border: 1px solid rgba(68,52,62,.09); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 28px 80px rgba(51,40,47,.16); backdrop-filter: blur(20px); }
.auth-brand { display:flex;align-items:center;gap:10px;color:#342d34;font-weight:850;letter-spacing:.08em }.auth-brand .brand-mark { color:white;background:linear-gradient(145deg,#f17d6e,#d95352) }
.auth-copy { margin:28px 0 22px }.auth-copy span { color:#d35f56;font:9px ui-monospace,monospace;letter-spacing:.18em }.auth-copy h1 { margin:9px 0 8px;font:500 36px Georgia,serif;letter-spacing:-.04em }.auth-copy p { margin:0;color:#8c8188;font-size:12px;line-height:1.7 }
.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:24px;padding:5px;border:1px solid rgba(68,52,62,.05);border-radius:14px;background:#f2eeeb }.auth-tabs button { position:relative;padding:10px;border:0;border-radius:10px;color:#91878d;background:transparent;font-size:12px;font-weight:800;transition:.2s ease }.auth-tabs button.active { color:#3f363c;background:white;box-shadow:0 5px 18px rgba(51,40,47,.09) }
.auth-form { display:grid;gap:14px }.auth-form[hidden] { display:none }.auth-form label { display:grid;gap:7px;color:#746b70;font-size:11px }.auth-form input { width:100%;padding:12px 13px;border:1px solid rgba(68,52,62,.12);border-radius:12px;color:#352e33;background:white;font:inherit;outline:none }.auth-form input:focus { border-color:#e0796e;box-shadow:0 0 0 3px rgba(224,121,110,.1) }.auth-form .btn { width:100%;margin-top:4px }
.auth-error { margin:0 0 15px;padding:11px 13px;border:1px solid rgba(214,75,68,.1);border-radius:11px;color:#a43f3b;background:rgba(214,75,68,.07);font-size:11px;line-height:1.5 }
.auth-logout { border:0;color:inherit;background:transparent;font:inherit;cursor:pointer }

.auth-user-gate { padding:28px; }
.auth-shell { display:grid;grid-template-columns:1.06fr .94fr;width:min(100%,980px);min-height:650px;overflow:hidden;border:1px solid rgba(68,52,62,.08);border-radius:32px;background:rgba(255,255,255,.74);box-shadow:0 38px 100px rgba(52,42,49,.17);backdrop-filter:blur(24px) }
.auth-showcase { position:relative;display:flex;flex-direction:column;overflow:hidden;padding:42px;color:white;background:radial-gradient(circle at 82% 18%,rgba(242,158,144,.26),transparent 34%),linear-gradient(145deg,#37313f,#28242f) }
.auth-showcase::after { content:"";position:absolute;width:330px;height:330px;right:-170px;bottom:-170px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018) }
.auth-showcase-brand { position:relative;z-index:2;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:850;letter-spacing:.08em }.auth-showcase-brand .brand-mark { background:#f07a6c }.auth-showcase-brand span:last-child { display:flex;flex-direction:column }.auth-showcase-brand small { margin-top:2px;color:#aaa0ae;font-size:7px;letter-spacing:.22em }
.auth-showcase-copy { position:relative;z-index:2;margin-top:64px }.auth-showcase-copy > span,.auth-panel-heading > span { color:#ef9184;font:800 9px ui-monospace,monospace;letter-spacing:.18em }.auth-showcase-copy h2 { margin:12px 0 16px;font:500 42px/1.08 Georgia,serif;letter-spacing:-.045em }.auth-showcase-copy p { max-width:390px;margin:0;color:#c8c0ca;font-size:13px;line-height:1.85 }
.auth-companion-art { position:relative;z-index:2;display:grid;place-items:center;min-height:250px;margin-top:18px }.auth-orbit { position:absolute;width:220px;height:220px;border:1px dashed rgba(242,158,144,.28);border-radius:50%;animation:spin 32s linear infinite }.auth-orbit::before { content:"";position:absolute;top:25px;left:21px;width:9px;height:9px;border-radius:50%;background:#e8a13a;box-shadow:170px 148px 0 #4ca989 }.auth-bot { position:relative;width:132px;height:138px;border-radius:45% 45% 39% 39%;background:#fbf8f5;box-shadow:0 25px 60px rgba(0,0,0,.22) }.auth-bot::before,.auth-bot::after { content:"";position:absolute;bottom:-7px;width:30px;height:19px;border-radius:50%;background:#fbf8f5 }.auth-bot::before {left:20px}.auth-bot::after {right:20px}.auth-bot-face { position:absolute;inset:31px 20px 36px;border-radius:27px;background:#37313f }.auth-bot-face i { position:absolute;top:26px;width:10px;height:14px;border-radius:50%;background:#ffd7ca }.auth-bot-face i:first-child {left:24px}.auth-bot-face i:nth-child(2) {right:24px}.auth-bot-face b { position:absolute;left:50%;bottom:16px;width:18px;height:8px;transform:translateX(-50%);border-bottom:2px solid #ef9184;border-radius:50% }.auth-companion-art > span { position:absolute;right:12px;bottom:36px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#d6ced8;background:rgba(255,255,255,.07);font-size:9px;backdrop-filter:blur(10px) }
.auth-feature-row { position:relative;z-index:2;display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:#d0c8d2;font-size:11px;font-weight:650 }.auth-feature-row span {display:flex;align-items:center;gap:7px}.auth-feature-row i {color:#ef9184;font-size:12px;font-style:normal}
.auth-user-card { display:flex;flex-direction:column;min-width:0;width:100%;padding:38px 44px;border:0;border-radius:0;background:rgba(255,255,255,.9);box-shadow:none;backdrop-filter:none }
.auth-card-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:34px }.auth-mobile-brand { display:none;align-items:center;gap:8px;color:#302c39;font-size:12px;font-weight:850;text-decoration:none }.auth-mobile-brand .brand-mark {width:31px;height:31px;border-radius:10px}.auth-back-link { color:#8a8086;font-size:10px;font-weight:700;text-decoration:none }.auth-back-link:hover {color:#d35f56}.auth-back-link span {margin-left:3px}
.auth-panel-heading { margin:2px 0 8px }.auth-panel-heading h1 { margin:8px 0 7px;font:500 35px/1.05 Georgia,serif;letter-spacing:-.04em }.auth-panel-heading p { margin:0;color:#91878d;font-size:11px;line-height:1.6 }
.auth-field > span { padding-left:2px;font-weight:750 }.auth-field small {color:#a0979c;font-size:9px;line-height:1.5}.auth-input-wrap { position:relative;min-width:0 }.auth-input-wrap > i { position:absolute;left:14px;top:50%;z-index:2;transform:translateY(-50%);color:#b1a7ac;font:700 12px ui-monospace,monospace }.auth-input-wrap input { min-width:0;height:48px;padding:0 48px 0 39px;border-color:#e8e0dc;border-radius:13px;background:#fcfaf8;font-size:12px }.auth-input-wrap input::placeholder {color:#bbb2b6}.auth-input-wrap:focus-within > i {color:#df7368}.auth-input-wrap input:focus {background:white}
.auth-password-toggle { position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 7px;border:0;border-radius:7px;color:#9a9095;background:transparent;font-size:9px;font-weight:750 }.auth-password-toggle:hover {color:#d35f56;background:#f8efec}
.auth-code-row { display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:8px }.auth-code-row .auth-input-wrap input {padding-right:12px}.auth-code-button { min-width:0;border:1px solid rgba(224,121,110,.22);border-radius:12px;color:#d35f56;background:#fff7f4;font-size:10px;font-weight:800;cursor:pointer }.auth-code-button:hover:not(:disabled) {border-color:#df7368;background:#fff}.auth-code-button:disabled {color:#aaa0a5;cursor:not-allowed;opacity:.75}
.auth-form-note { display:flex;justify-content:space-between;color:#9d9398;font-size:9px }.auth-form-note span {display:flex;align-items:center;gap:6px}.auth-form-note i {width:6px;height:6px;border-radius:50%;background:#4ca989;box-shadow:0 0 0 3px rgba(76,169,137,.1)}
.auth-submit { display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 17px!important;border-radius:13px!important;background:linear-gradient(135deg,#ef7466,#db5b55)!important;box-shadow:0 13px 28px rgba(219,91,85,.24)!important;font-size:12px }.auth-submit b {font-size:17px;font-weight:400}.auth-submit:hover {box-shadow:0 16px 32px rgba(219,91,85,.3)!important}
.auth-agreement { margin:0;text-align:center;color:#a39a9f;font-size:8px;line-height:1.55 }

@media (max-width:800px) { .auth-user-gate{padding:18px}.auth-shell{grid-template-columns:1fr;width:min(100%,500px);min-height:0}.auth-showcase{display:none}.auth-user-card{min-height:620px;padding:30px 34px}.auth-mobile-brand{display:flex}.auth-card-head{margin-bottom:28px} }
@media (max-width:520px) { .auth-gate{padding:0}.auth-card:not(.auth-user-card){min-height:100vh;padding:28px 22px;border-radius:0}.auth-copy h1{font-size:31px}.auth-user-gate{padding:0;background:white}.auth-shell{width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none}.auth-user-card{min-height:100vh;padding:24px 22px}.auth-card-head{margin-bottom:24px}.auth-panel-heading h1{font-size:32px}.auth-tabs{margin-bottom:20px} }

@media (max-width: 760px) {
  .archetype-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .personality-slider-grid { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 5%, rgba(255, 194, 174, .5), transparent 28rem),
    radial-gradient(circle at 10% 45%, rgba(187, 231, 216, .34), transparent 24rem),
    var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--coral); color: white; box-shadow: 0 8px 22px rgba(239,106,91,.26); }
.nav { display: flex; align-items: center; gap: 10px; }
.nav a { text-decoration: none; color: var(--muted); padding: 9px 12px; border-radius: 10px; }
.nav a:hover { background: rgba(255,255,255,.65); color: var(--ink); }

.hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 44px; padding: 52px 0 64px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-dark); font-weight: 750; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); }
h1 { margin: 14px 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 7vw, 82px); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
.hero p { color: var(--muted); font-size: 18px; line-height: 1.75; max-width: 650px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { border: 0; border-radius: 13px; padding: 12px 18px; color: white; background: var(--ink); box-shadow: 0 10px 24px rgba(48,44,57,.16); font-weight: 750; text-decoration: none; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: wait; opacity: .62; transform: none; }
.btn.primary { background: var(--coral); }
.btn.ghost { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); box-shadow: none; }
.btn.danger { color: #a53d35; border-color: rgba(165,61,53,.22); }
.btn.small { padding: 8px 12px; font-size: 13px; }

.mora-stage { min-height: 320px; display: grid; place-items: center; position: relative; }
.orbit { position: absolute; width: 310px; height: 310px; border: 1px dashed rgba(239,106,91,.35); border-radius: 50%; animation: spin 28s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 13px; height: 13px; background: var(--amber); border-radius: 50%; top: 35px; left: 44px; box-shadow: 210px 200px 0 var(--mint); }
@keyframes spin { to { transform: rotate(360deg); } }
.mora { width: 210px; height: 220px; border-radius: 48% 48% 42% 42%; background: #fff; box-shadow: var(--shadow), inset 0 -18px 32px rgba(231,215,205,.35); display: grid; place-items: center; position: relative; z-index: 1; }
.mora::before, .mora::after { content: ""; position: absolute; bottom: -10px; width: 44px; height: 30px; background: #fff; border-radius: 50%; }
.mora::before { left: 34px; transform: rotate(-8deg); } .mora::after { right: 34px; transform: rotate(8deg); }
.face { width: 148px; height: 104px; background: #383241; border-radius: 42px; position: relative; box-shadow: inset 0 5px 14px rgba(0,0,0,.22); }
.eye { position: absolute; top: 39px; width: 15px; height: 21px; background: #ffd9c9; border-radius: 50%; animation: blink 5s infinite; }
.eye.left { left: 39px; }.eye.right { right: 39px; }
@keyframes blink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
.smile { position: absolute; left: 62px; top: 70px; width: 24px; height: 12px; border-bottom: 3px solid #f39b8e; border-radius: 50%; }

.app-hero { position: relative; grid-template-columns: 1.15fr .85fr; padding: 34px 42px; margin: 12px 0 42px; overflow: hidden; border: 1px solid rgba(234,223,216,.85); border-radius: 30px; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,232,224,.66)); box-shadow: var(--shadow); }
.app-hero::after { content: ""; position: absolute; width: 280px; height: 280px; right: -90px; bottom: -140px; border-radius: 50%; background: rgba(76,169,137,.10); }
.app-hero .hero-copy { position: relative; z-index: 2; }
.app-hero h1 { max-width: 640px; font-size: clamp(42px, 5vw, 64px); }
.app-hero p { margin-bottom: 0; font-size: 16px; }
.app-hero .mora-stage { min-height: 255px; transform: scale(.78); margin: -24px -18px; }
.text-action { border: 0; padding: 11px 4px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 700; }
.text-action:hover { color: var(--coral-dark); }
.presence-badge { position: absolute; right: -22px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(79,55,42,.12); }
.presence-badge > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(76,169,137,.13); }
.presence-badge strong, .presence-badge small { display: block; }.presence-badge strong { font-size: 13px; }.presence-badge small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.section { padding: 20px 0 62px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.section-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 500; letter-spacing: -.03em; }
.section-head p { color: var(--muted); margin: 5px 0 0; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.card { grid-column: span 4; background: var(--card); border: 1px solid rgba(234,223,216,.85); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); backdrop-filter: blur(15px); }
.admin-metrics .card { grid-column: span 3; }
.card.wide { grid-column: span 8; }.card.full { grid-column: 1 / -1; }
.card h3 { margin: 0 0 16px; font-size: 17px; }
.metric { font-family: Georgia, serif; font-size: 40px; letter-spacing: -.04em; }
.metric-label { color: var(--muted); font-size: 13px; margin-top: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { color: var(--muted); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.76); padding: 11px 12px; border-radius: 11px; color: var(--ink); outline: none; }
textarea { resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(239,106,91,.12); }
.field small { color: var(--muted); line-height: 1.55; }
.voice-preview-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.voice-preview-row input, .voice-preview-row select { min-width: 0; width: 100%; }
.voice-preview-row button { min-width: 62px; padding: 0 14px; border: 1px solid rgba(239,106,91,.24); border-radius: 12px; color: var(--coral-dark); background: rgba(239,106,91,.08); font-weight: 800; }
.voice-preview-row button:hover { color: white; background: var(--coral); }
.voice-preview-row button:disabled { opacity: .5; cursor: wait; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }

.setup-panel { padding-top: 8px; }
.setup-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px 26px; list-style: none; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: var(--shadow); cursor: pointer; }
.setup-summary::-webkit-details-marker { display: none; }
.setup-summary h2 { margin: 3px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.setup-summary p { margin: 0; color: var(--muted); font-size: 13px; }
.setup-kicker { color: var(--coral-dark); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.setup-toggle { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; font-size: 0; font-weight: 750; }
.setup-toggle::after { content: "展开设置"; font-size: 12px; }
.setup-panel[open] .setup-toggle::after { content: "收起设置"; }
.setup-panel[open] .setup-summary { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.setup-body { padding-top: 18px; }
.setup-subpanel { padding: 0; overflow: hidden; }
.setup-subpanel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; list-style: none; cursor: pointer; }
.setup-subpanel > summary::-webkit-details-marker { display: none; }
.setup-subpanel > summary strong, .setup-subpanel > summary small { display: block; }.setup-subpanel > summary strong { font-size: 15px; }.setup-subpanel > summary small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.setup-subpanel > summary > span { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: #f5eee8; font-size: 10px; font-weight: 800; }
.setup-subpanel[open] > summary { border-bottom: 1px solid var(--line); }.setup-subpanel[open] > summary > span { color: var(--coral-dark); background: #ffe8df; }
.setup-subpanel > form { padding: 20px; }

.profile-card { padding: 0; overflow: hidden; }
.profile-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px; background: linear-gradient(135deg, rgba(255,231,222,.75), rgba(234,247,242,.65)); border-bottom: 1px solid var(--line); }
.profile-title h3 { margin-bottom: 5px; font-size: 20px; }.profile-title p { margin: 0; color: var(--muted); }
.profile-title-meta { display: grid; justify-items: end; gap: 7px; }
.profile-count { white-space: nowrap; color: var(--coral-dark); background: rgba(255,255,255,.7); border: 1px solid rgba(239,106,91,.18); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 800; }
.profile-completion { color: var(--muted); font-size: 10px; font-weight: 750; transition: color .2s; }
.profile-completion.dirty { color: #c67a32; }
.profile-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0 26px; background: rgba(255,255,255,.45); border-bottom: 1px solid var(--line); }
[data-profile-page][hidden] { display: none; }
.profile-step { border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); padding: 17px 10px 14px; font-weight: 750; }
.profile-step span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 8px; background: #f3ece7; font-size: 11px; }
.profile-step.active { color: var(--coral-dark); border-bottom-color: var(--coral); }
.profile-step.active span { color: white; background: var(--coral); }
.profile-step:focus-visible { outline: 2px solid rgba(239,106,91,.4); outline-offset: -4px; border-radius: 10px 10px 0 0; }
.model-provider-state { padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(250,247,244,.7); color: var(--muted); font-size: 12px; line-height: 1.55; }
.check-field { display: flex; align-items: flex-start; flex-direction: row; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.check-field input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); }
.check-field span { display: grid; gap: 4px; }.check-field strong { color: var(--ink); font-size: 13px; }.check-field small { color: var(--muted); line-height: 1.45; }
.profile-group { display: grid; grid-template-columns: 210px 1fr; gap: 28px; max-height: min(72vh, 760px); overflow-y: auto; padding: 26px; border-bottom: 1px solid var(--line); scrollbar-color: rgba(239,106,91,.35) transparent; }
.profile-group-head { display: flex; align-items: flex-start; gap: 12px; }
.profile-group-head > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--coral-dark); background: #ffe8df; font: 800 12px ui-monospace, monospace; }
.profile-group-head h4 { margin: 2px 0 6px; font-size: 15px; }.profile-group-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.profile-group .form-grid { align-content: start; }
.page-quick-guide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border: 1px solid rgba(76,169,137,.2); border-radius: 14px; color: #46675c; background: rgba(232,247,241,.72); }.page-quick-guide strong,.page-quick-guide small { display: block; }.page-quick-guide strong { font-size: 12px; }.page-quick-guide small { margin-top: 3px; color: #6b7d76; font-size: 10px; }.page-quick-guide span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #3f806b; background: rgba(255,255,255,.75); font-size: 9px; font-weight: 850; }
.optional-settings { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.72); }.optional-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }.optional-settings > summary::-webkit-details-marker { display: none; }.optional-settings > summary strong,.optional-settings > summary small { display: block; }.optional-settings > summary strong { font-size: 12px; }.optional-settings > summary small { margin-top: 3px; color: var(--muted); font-size: 10px; }.optional-settings > summary span { color: var(--muted); font-size: 9px; font-weight: 800; }.optional-settings[open] > summary { border-bottom: 1px solid var(--line); }.optional-settings[open] > summary span { color: var(--coral-dark); }.optional-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 16px; }.optional-settings-grid > .field-divider { margin-top: 2px; }
.field-divider { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 8px 0 0; padding: 15px 1px 8px; border-top: 1px dashed rgba(112,93,84,.18); }
.field-divider span { color: var(--ink); font-size: 13px; font-weight: 850; }
.field-divider small { color: var(--muted); font-size: 11px; text-align: right; }
.range-field label { display: flex; justify-content: space-between; align-items: center; }
.range-field output { color: var(--coral-dark); font-weight: 850; font-size: 14px; }
.range-field input[type="range"] { appearance: none; height: 7px; padding: 0; border: 0; border-radius: 99px; background: linear-gradient(90deg, var(--coral), #f3c59e); accent-color: var(--coral); }
.archetype-field { padding: 14px; border: 1px solid rgba(239,106,91,.17); border-radius: 16px; background: linear-gradient(135deg,#fff9f6,#fbf8f5); }
.archetype-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 3px; }.archetype-loading { color: var(--muted); font-size: 12px; }
.archetype-card { min-height: 104px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.86); text-align: left; transition: transform .18s,border-color .18s,box-shadow .18s; }.archetype-card:hover { transform: translateY(-1px); border-color: rgba(239,106,91,.38); }.archetype-card.active { border-color: var(--coral); box-shadow: 0 8px 24px rgba(239,106,91,.12),inset 0 0 0 1px rgba(239,106,91,.14); }.archetype-card strong,.archetype-card small { display: block; }.archetype-card strong { font-size: 13px; }.archetype-card small { min-height: 32px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }.archetype-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }.archetype-tags i { padding: 3px 5px; border-radius: 999px; color: var(--coral-dark); background: #fff0ea; font: 700 8px/1 sans-serif; }
.personality-advanced { padding: 0; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.personality-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }.personality-advanced > summary::-webkit-details-marker { display:none; }.personality-advanced > summary span { font-size: 13px; font-weight: 850; }.personality-advanced > summary small { color: var(--coral-dark); font-size: 10px; text-align: right; }.personality-advanced[open] > summary { border-bottom: 1px solid var(--line); }.personality-slider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }.personality-slider-grid .field { min-width: 0; padding: 10px; border-radius: 11px; background: #faf7f4; }.personality-slider-grid .field small { margin-top: 6px; }
.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 26px 26px; margin: 0; background: rgba(255,255,255,.28); }
.profile-actions-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.reset-settings { padding-inline: 11px; color: var(--muted); font-size: 11px; }
.profile-actions-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.profile-page-status { color: var(--muted); font-size: 12px; font-weight: 750; }

.companion-list { display: grid; gap: 14px; }
.companion-card { display: flex; flex-direction: column; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,247,242,.74)); }
.companion-card-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; }
.avatar { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: var(--coral-dark); font-size: 20px; font-weight: 850; background: linear-gradient(135deg, #ffe2d8, #fff0e9); box-shadow: inset 0 0 0 1px rgba(239,106,91,.08); }
.companion-role { display: block; margin-bottom: 3px; color: var(--coral-dark); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.companion-card h4 { margin: 0; font-size: 21px; letter-spacing: -.02em; }.companion-card p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.companion-core { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 17px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,229,220,.62), rgba(235,247,242,.62)); }
.core-copy > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.core-copy strong { display: block; font-size: 15px; line-height: 1.45; }.core-copy p { max-width: 720px; margin-top: 5px; }
.energy-ring { width: 78px; height: 78px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--coral) var(--energy), rgba(255,255,255,.66) 0); }
.energy-ring::before { content: ""; grid-area: 1 / 1; width: 62px; height: 62px; border-radius: 50%; background: #fffaf7; }
.energy-ring > div { grid-area: 1 / 1; z-index: 1; text-align: center; }.energy-ring strong, .energy-ring span { display: block; }.energy-ring strong { font: 600 20px Georgia, serif; }.energy-ring span { margin-top: 1px; color: var(--muted); font-size: 9px; }
.ta-details { border-top: 1px solid rgba(234,223,216,.8); }
.ta-details summary { padding-top: 14px; color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; }
.ta-details[open] summary { color: var(--coral-dark); }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.device-id { margin-left: auto; color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip { font-size: 12px; padding: 5px 8px; background: #f5eee8; border-radius: 999px; color: #625965; }
.profile-meter-summary { margin-top: 9px; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.psychology-summary { margin-top: 5px; max-width: 680px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.device { min-width: 92px; text-align: right; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #aaa; }
.status.online::before { background: var(--mint); box-shadow: 0 0 0 4px rgba(76,169,137,.13); }
.battery { color: var(--muted); margin-top: 5px; font-size: 11px; }
.empty { text-align: center; padding: 38px 18px; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; }
.notice { position: fixed; right: 22px; bottom: 22px; max-width: 340px; background: var(--ink); color: white; padding: 13px 16px; border-radius: 12px; box-shadow: var(--shadow); z-index: 10; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; }
.notice.show { opacity: 1; transform: translateY(0); }

.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-studio { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 8px; color: var(--ink); background: #fbfaf8; box-shadow: 0 28px 80px rgba(41,35,45,.28); }
.avatar-studio::backdrop { background: rgba(38,34,42,.52); backdrop-filter: blur(5px); }
.avatar-studio-shell { min-width: 0; }
.avatar-studio-head { display: flex; justify-content: space-between; gap: 20px; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); background: white; }
.avatar-studio-head h2 { margin: 3px 0 2px; font-size: 25px; }.avatar-studio-head p { margin: 0; color: var(--muted); font-size: 12px; }
.avatar-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--muted); font-size: 22px; line-height: 1; }
.avatar-studio-body { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); min-height: 590px; }
.avatar-controls,.avatar-preview-panel { min-width: 0; padding: 24px 26px; }.avatar-controls { display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--line); background: #f5f1ed; }
.avatar-upload { display: grid; place-items: center; min-height: 138px; padding: 18px; border: 1px dashed #c9aaa0; border-radius: 8px; background: white; cursor: pointer; text-align: center; }.avatar-upload-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--coral); color: white; font-size: 24px; }.avatar-upload strong { font-size: 13px; }.avatar-upload small { color: var(--muted); font-size: 10px; }
.avatar-control-group { display: grid; gap: 10px; }.avatar-control-group > strong,.avatar-pipeline > strong { font-size: 12px; }
.avatar-segments { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: white; }.avatar-segments button { min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }.avatar-segments button.active { background: var(--ink); color: white; }
.avatar-style-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }.avatar-style-grid button { display: grid; gap: 2px; min-height: 56px; padding: 8px 5px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); }.avatar-style-grid button.active { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }.avatar-style-grid span { font-size: 11px; font-weight: 800; }.avatar-style-grid small { color: var(--muted); font-size: 9px; }
.avatar-pipeline { display: grid; gap: 10px; margin-top: auto; }.avatar-pipeline ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: var(--muted); font-size: 10px; }.avatar-pipeline li.active { color: var(--coral-dark); font-weight: 800; }.avatar-pipeline > small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.avatar-preview-panel { display: flex; flex-direction: column; gap: 14px; background: white; }
.avatar-device-preview { position: relative; display: grid; place-items: center; width: min(100%, 420px); aspect-ratio: 16 / 10; margin: 0 auto; overflow: hidden; border: 10px solid #302e33; border-radius: 26px; background: #18171a; box-shadow: 0 18px 36px rgba(40,36,44,.18); }.avatar-device-preview img { width: 100%; height: 100%; object-fit: cover; animation: avatar-breathe 3.8s ease-in-out infinite; }.avatar-device-preview[data-style="chibi"] img { border-radius: 35%; }.avatar-device-preview[data-style="anime"] img { filter: saturate(1.08) brightness(1.04); }.avatar-device-preview[data-style="pixel"] img { image-rendering: pixelated; }.avatar-preview-placeholder { display: grid; gap: 5px; color: white; text-align: center; }.avatar-preview-placeholder strong { font-size: 14px; }.avatar-preview-placeholder span { color: #aaa5ae; font-size: 10px; }
.avatar-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.avatar-preview-meta span { color: var(--coral-dark); font-size: 10px; font-weight: 800; }.avatar-preview-meta strong { font-size: 12px; }
.avatar-asset-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }.avatar-asset-list span { overflow: hidden; padding: 7px 8px; border-radius: 5px; background: #f4f1ee; color: var(--muted); font: 9px/1.2 ui-monospace,monospace; text-overflow: ellipsis; white-space: nowrap; }.avatar-asset-list span.ready { color: #307358; background: #edf7f1; }
.avatar-consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fbfaf8; }.avatar-consent input { margin-top: 2px; }.avatar-consent span { display: grid; gap: 3px; }.avatar-consent strong { font-size: 11px; }.avatar-consent small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.avatar-studio-actions { display: flex; justify-content: flex-end; gap: 9px; }.avatar-sync-status { min-height: 18px; color: var(--muted); font-size: 10px; text-align: right; }
@keyframes avatar-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
td strong { font-size: 14px; }
.table-empty { text-align: center; color: var(--muted); padding: 32px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.footer { padding: 30px 0 50px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .mora-stage { order: -1; min-height: 260px; transform: scale(.85); margin: -20px 0; }
  .app-hero { grid-template-columns: 1.2fr .8fr; padding: 30px; }
  .app-hero .mora-stage { order: initial; min-height: 240px; transform: scale(.68); margin: -30px -48px; }
  .card, .card.wide { grid-column: 1 / -1; }
  .admin-metrics .card { grid-column: span 6; }
  .nav a:first-child { display: none; }
  .profile-group { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .shell { width: min(100% - 22px, 1180px); }
  .topbar { padding: 14px 0; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .nav a { padding: 8px 4px; font-size: 13px; }
  h1 { font-size: 42px; }
  .app-hero { display: block; min-height: 270px; padding: 23px 20px; margin: 4px 0 30px; border-radius: 24px; }
  .app-hero .hero-copy { max-width: 78%; }
  .app-hero h1 { margin: 11px 0 12px; font-size: 35px; line-height: 1.04; }
  .app-hero p { max-width: 94%; font-size: 13px; line-height: 1.6; }
  .app-hero .actions { gap: 8px; margin-top: 18px; }
  .app-hero .btn { padding: 10px 12px; border-radius: 11px; font-size: 12px; }
  .app-hero .text-action { flex-basis: 100%; padding: 3px 0; text-align: left; font-size: 11px; }
  .app-hero .mora-stage { position: absolute; top: -6px; right: -104px; width: 310px; min-height: 270px; margin: 0; transform: scale(.48); transform-origin: center; opacity: .9; pointer-events: none; }
  .app-hero .presence-badge { display: none; }
  .section { padding: 12px 0 38px; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 28px; }
  .section-head p { font-size: 13px; }
  .overview-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .overview-card { grid-column: auto !important; padding: 14px 9px; border-radius: 16px; text-align: center; box-shadow: 0 8px 24px rgba(79,55,42,.07); }
  .overview-card .metric { font-size: 29px; }
  .overview-card .metric-label { font-size: 10px; }
  #companions > .card.full { padding: 10px; border-radius: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .profile-group { max-height: none; overflow: visible; }
  .optional-settings-grid { grid-template-columns: 1fr; }
  .profile-title { align-items: flex-start; padding: 20px 18px; }
  .profile-title-meta { justify-items: end; }
  .field-divider { align-items: flex-start; flex-direction: column; gap: 4px; }
  .field-divider small { text-align: left; }
  .field { grid-column: 1 / -1; }
  .companion-card { gap: 14px; padding: 15px; border-radius: 16px; }
  .companion-card-head { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; }
  .avatar { width: 43px; height: 43px; border-radius: 14px; font-size: 17px; }
  .companion-card h4 { font-size: 18px; }
  .companion-identity p { display: none; }
  .device { min-width: 66px; padding: 0; text-align: right; }
  .status { gap: 5px; font-size: 11px; }.status::before { width: 7px; height: 7px; }
  .battery { font-size: 10px; }
  .companion-core { gap: 12px; padding: 14px; }
  .core-copy strong { font-size: 13px; }.core-copy p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; }
  .energy-ring { width: 64px; height: 64px; }.energy-ring::before { width: 51px; height: 51px; }.energy-ring strong { font-size: 17px; }
  .card-actions .btn { padding: 8px 10px; font-size: 11px; }
  .device-id { flex-basis: 100%; margin-left: 0; }
  .section-head { align-items: start; flex-direction: column; }
  .setup-summary { align-items: flex-end; padding: 18px; border-radius: 18px; }
  .setup-summary h2 { font-size: 22px; }.setup-summary p { max-width: 220px; font-size: 11px; }
  .setup-toggle { padding: 8px 10px; }
  .profile-title { align-items: flex-start; flex-direction: column; padding: 20px; }
  .profile-steps { padding: 0; overflow-x: auto; }
  .profile-step { min-width: 92px; padding: 14px 5px 12px; font-size: 11px; }
  .profile-step span { width: 21px; height: 21px; margin-right: 3px; }
  .profile-group { padding: 20px; }
  .profile-actions { align-items: stretch; flex-wrap: wrap; padding: 18px 20px 22px; }
  .profile-actions-left { width: 100%; }
  .profile-actions-right { width: 100%; margin-left: 0; }
  .profile-actions-right .btn { flex: 1; }
  .avatar-studio { width: 100vw; max-height: 100vh; border-radius: 0; }.avatar-studio-body { grid-template-columns: 1fr; }.avatar-controls { border-right: 0; border-bottom: 1px solid var(--line); }.avatar-controls,.avatar-preview-panel { padding: 18px; }.avatar-device-preview { width: 100%; }.avatar-asset-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.avatar-studio-actions .btn { flex: 1; padding: 10px 8px; }
}