/* Velunora V3.4 — purely visual layer; preserves existing API and form controls. */
:root{
  --v-ink:#25345c;--v-body:#485a79;--v-sub:#7b88a5;--v-line:#e7eaf5;
  --v-blue:#607cec;--v-purple:#8c7de5;--v-cream:#fbfbff;
  --v-shadow:0 12px 38px rgba(50,61,119,.055);
  --v-round:18px;
  color:var(--v-ink);
  background:#f8f9fe;
}
html{scroll-behavior:smooth}
body{
  color:var(--v-ink);line-height:1.55;
  background:radial-gradient(ellipse 740px 480px at 95% -7%,#e8e9fe 0%,transparent 73%),
    radial-gradient(ellipse 670px 430px at -10% 42%,#edf6fa 0%,transparent 69%),#f8f9fe;
}
body,button,input,select,textarea{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button,a,input,select,textarea{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(103,118,221,.39);outline-offset:3px}
.shell{max-width:980px;padding:26px 28px 72px}
.admin-page .shell{max-width:1240px}
.top{margin:0 0 26px;min-height:66px}
.brand-area{display:flex;gap:12px;align-items:center;text-decoration:none!important;color:inherit;min-width:0}
.brand-area:hover{opacity:.9}
.brand-symbol{width:56px;height:56px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 8px rgba(92,107,216,.12))}
.brand-copy{display:flex;flex-direction:column;gap:1px}
.brand-name{font-family:ui-rounded,"Trebuchet MS","Avenir Next",sans-serif;font-size:30px;line-height:1.08;font-weight:600;letter-spacing:-.045em;color:#394c93}
.brand-caption{font-size:10px;letter-spacing:.09em;color:#8895b7;font-weight:500}
.top-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.back-link{font-size:13px;color:#68779e;font-weight:600}
.chip{background:#f0efff;color:#7465b8;font-size:12px;font-weight:600;padding:8px 13px}
.hero{position:relative;overflow:hidden;padding:34px 39px 36px;border-radius:24px;background:linear-gradient(113deg,#f1f1ff 1%,#f0f7ff 54%,#f8effb 100%);color:var(--v-ink);box-shadow:none;border:1px solid rgba(255,255,255,.74)}
.hero::after{content:"";position:absolute;width:285px;height:285px;border-radius:50%;right:-92px;top:-188px;border:58px solid rgba(158,170,246,.09);pointer-events:none}
.hero h1{color:#273767;font-size:clamp(24px,3.2vw,34px);font-weight:730;letter-spacing:.016em;margin-bottom:9px}
.hero p{color:#7180a6;font-size:14px;max-width:710px;line-height:1.9}
.card{margin-top:20px;padding:28px 30px;border:1px solid rgba(229,232,246,.64);border-radius:var(--v-round);box-shadow:var(--v-shadow);background:rgba(255,255,255,.88)}
.card h2{font-size:19px;font-weight:750;letter-spacing:.006em;color:#2f3d69}
.card h3{color:#3e4b72;margin-top:22px}
.admin-page #app>.card:first-child{background:transparent;box-shadow:none;border:0;padding:21px 0 0;margin-top:4px}
.admin-page #app>.card:not(:first-child){box-shadow:0 9px 28px rgba(48,65,118,.048);border:1px solid rgba(230,234,247,.55)}
.admin-page #editorPanel,.admin-page #statsPanel,.admin-page #sharePanel,.admin-page #invitesPanel{scroll-margin-top:28px}
.muted{color:#7885a1}
.footer{color:#9ba6bd}
.button{border-radius:12px;min-height:43px;padding:10px 17px;font-weight:650;background:linear-gradient(120deg,#6586f0,#8777e6);box-shadow:0 4px 12px rgba(102,115,214,.13);gap:7px;position:relative}
.button:hover:not(:disabled){background:linear-gradient(120deg,#5778df,#796ad7);box-shadow:0 7px 17px rgba(95,110,208,.18);transform:translateY(-1px)}
.button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 4px rgba(74,87,172,.16)}
.button:disabled{opacity:.52;box-shadow:none;cursor:not-allowed}
.button.secondary{background:#f2f4fd;color:#526497;box-shadow:none}
.button.secondary:hover:not(:disabled){background:#e7ebfa;color:#3e5194;box-shadow:0 3px 8px rgba(72,83,148,.07)}
.button.danger{color:#c75c70;background:#fef4f5;box-shadow:none}
.button.danger:hover:not(:disabled){background:#ffe8ed;color:#aa314f;box-shadow:none}
.button.is-loading{cursor:progress;opacity:.8}
.button.is-loading::before{content:"";width:12px;height:12px;display:inline-block;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:v-spin .72s linear infinite;flex:none}
@keyframes v-spin{to{transform:rotate(360deg)}}
.input,textarea{border:1px solid #e0e6f5;border-radius:12px;color:#2b3a60;background:#fff;padding:12px 15px;box-shadow:0 2px 7px rgba(34,45,78,.02)}
.input:focus,textarea:focus{border-color:#8c9dea;box-shadow:0 0 0 4px rgba(115,129,237,.13)}
input::placeholder,textarea::placeholder{color:#a2abc0}
.field>label{color:#4f5f82;font-weight:600}
.choice{background:#fafbff;border:1px solid #ebedf7;border-radius:12px;min-height:46px}
.choice:hover{background:#f5f5ff;border-color:#d9def5}
.choice:has(input:checked){border-color:#b3b8ed;background:#f4f3ff}
.choice input,.archive-toggle input{accent-color:#7b80df}
.actions{gap:11px}
.info{background:#f7f7ff;border-left:3px solid #a5a0eb;color:#596781;border-radius:0 11px 11px 0}
.error{background:#fff6f8;color:#a83d52;border-color:#fadce3}
.success{background:#f1fbf7;color:#347b68;border-color:#d7f3e6}
.score,.stat{background:#f5f6ff;border:0;border-radius:14px}
.big,.stat strong{color:#526bb6}
.bar{background:#e3e7fa;height:8px}
.bar>div{background:linear-gradient(90deg,#7d98ed,#a48fe8)}
.question{border-color:#e9eaf5}
.matrix{border:1px solid #eff0f8;border-radius:14px;overflow:hidden}
.matrix-head{background:#f1f2fd;color:#626e92}
.matrix-row{border-color:#edf0f8}
.matrix-row:nth-child(odd){background:#fafaff}
.matrix-option input{accent-color:#7b80e0}
.matrix-option:has(input:checked){background:#e9e8ff}
.tableWrap{overflow:auto}
.admin-page #surveys table{border-collapse:separate;border-spacing:0 9px;min-width:760px}
.admin-page #surveys thead th{background:transparent;border:0;color:#8792a9;text-transform:none;font-weight:600;font-size:12px;padding:7px 14px}
.admin-page #surveys tbody tr{background:#fff;box-shadow:0 4px 18px rgba(52,66,114,.055);transition:transform .18s,box-shadow .18s}
.admin-page #surveys tbody tr:hover{transform:translateY(-1px);box-shadow:0 9px 23px rgba(52,66,114,.095)}
.admin-page #surveys tbody td{border:0;padding:14px 15px;color:#526180}
.admin-page #surveys tbody td:first-child{border-radius:15px 0 0 15px;font-weight:650;color:#28365a}
.admin-page #surveys tbody td:last-child{border-radius:0 15px 15px 0}
.admin-page #surveys .row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:290px}
.admin-page #surveys .row-actions .button{font-size:12px;min-height:34px;padding:6px 11px;border-radius:9px}
.admin-page #stats table{border-collapse:collapse}
.admin-page #stats th{background:#f6f7ff;color:#667394;border-bottom:1px solid #eceffa}
.admin-page #stats td{border-color:#edf0f8}
.admin-page #stats h3{padding-top:16px;border-top:1px solid #eff0f8;margin-top:28px}
.admin-page #stats .stat{min-height:100px;padding:16px 18px}
.admin-page #stats .stats{gap:13px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:20px 0}
#config{background:#fbfcff;min-height:330px}
#saveMsg:empty{display:none}
.archive-toggle{background:transparent;border-radius:10px;padding:5px 9px;color:#69779a}
.archive-toggle:hover{background:#f1f3fc}
.v-toast-layer{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:3000;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.v-toast{pointer-events:auto;background:#fff;color:#415172;box-shadow:0 14px 42px rgba(55,68,120,.16);border:1px solid #e5e7f5;padding:13px 17px;border-radius:13px;display:flex;gap:10px;align-items:start;animation:v-appear .23s ease;line-height:1.5;font-size:13px}
.v-toast::before{content:'✓';color:#618f83;font-weight:bold;flex:none}
.v-toast.error::before{content:'!';color:#d35d72}
.v-toast.error{background:#fff;color:#9b3751}
@keyframes v-appear{from{transform:translateY(-7px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:800px){.admin-page .shell{padding:16px 18px 55px}.admin-page #surveys{overflow-x:auto}.hero{padding:28px 25px}.admin-page #app>.card:first-child{padding:18px 0 0}}
@media(max-width:590px){.shell{padding:14px 15px 50px}.top{gap:10px;align-items:flex-start}.brand-symbol{width:47px;height:47px}.brand-name{font-size:25px}.brand-caption{font-size:9px}.top-tools{gap:7px}.hero{padding:25px 22px;border-radius:19px}.hero h1{font-size:25px}.card{padding:20px;border-radius:16px}.admin-page #app>.card:first-child{padding:12px 0}.admin-page #stats .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v-toast-layer{top:12px;right:12px}.matrix-row{border-color:#e8eaf7}.matrix-question{background:#f5f5ff}.row-actions{min-width:260px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* The V3.4 editor uses whitespace rather than nested panels. */
.editor-grid{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(460px,1.6fr);gap:33px;align-items:start;margin-top:22px}
.editor-settings{padding-right:24px;border-right:1px solid #eef0f9}
.editor-settings h3,.editor-data h3{margin:0 0 17px;font-size:15px}
.editor-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
#config{min-height:370px;max-width:100%;resize:vertical}
.admin-page #surveys .v-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 11px;font-size:11px;white-space:nowrap;background:#f2f3ff;color:#6574aa;font-weight:650}
.admin-page #surveys .v-pill.open{background:#edf9f3;color:#367c60}
.admin-page #surveys .v-pill.paused{background:#f4f5f8;color:#7a8396}
.admin-page #surveys .v-pill.archived{background:#f2f2f5;color:#7d8493}
.admin-page #surveys .v-pill.longitudinal{background:#f2f0ff;color:#7365b4}
.admin-page #surveys .v-pill.invite{background:#fff5e8;color:#a37944}
@media(max-width:850px){.editor-grid{grid-template-columns:1fr;gap:20px}.editor-settings{padding-right:0;border-right:0;border-bottom:1px solid #eef0f9;padding-bottom:17px}}
.v-toast{margin:0;white-space:normal}
.admin-page #surveys .survey-title{font-weight:700;color:#2f416e;line-height:1.55}
.admin-page #surveys .survey-title + .muted{font-weight:400;color:#8c98b1;margin-top:4px;word-break:break-word}