@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root{--ink:#f2fbff;--muted:#91a6b5;--line:rgba(151,219,248,.16);--bg:#06131f;--card:rgba(9,28,43,.72);--accent:#33e6d1;--blue:#4e9dff;--warm:#ffc66b;--shadow:0 20px 60px rgba(0,0,0,.35)}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
.ambient{position:fixed;z-index:-2;filter:blur(5px);border-radius:50%;opacity:.75;pointer-events:none}
.ambient-one{width:530px;height:530px;top:-240px;left:-160px;background:radial-gradient(circle at 58% 58%,#1678ad 0,rgba(24,116,169,.6) 24%,transparent 66%);animation:floatOne 17s ease-in-out infinite}
.ambient-two{width:600px;height:600px;right:-230px;bottom:-300px;background:radial-gradient(circle at 40% 40%,#0bbf9e 0,rgba(9,150,158,.43) 30%,transparent 66%);animation:floatTwo 19s ease-in-out infinite}
.grid-overlay{position:fixed;inset:0;z-index:-1;opacity:.45;pointer-events:none;background:linear-gradient(rgba(97,178,221,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(97,178,221,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 87%)}
.shell{max-width:1100px;margin:0 auto;padding:65px 24px 70px}
header{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 39px}
header:after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:1px;background:linear-gradient(90deg,var(--accent),rgba(51,230,209,.1) 48%,transparent)}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.15em;font-weight:500;margin:0 0 11px}
.eyebrow i{display:block;width:7px;height:7px;background:var(--accent);box-shadow:0 0 0 4px rgba(51,230,209,.13),0 0 14px var(--accent);border-radius:50%;animation:pulse 2s infinite}
h1{font-size:43px;line-height:1;letter-spacing:-.065em;margin:0;text-shadow:0 3px 20px #0008}
h1 em{font-style:normal;background:linear-gradient(100deg,#79fce7,#68aaff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:13px 0 0;color:var(--muted);font-size:14px}
.connection{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.03em;margin-top:9px;padding:9px 12px;border:1px solid var(--line);border-radius:5px;background:rgba(10,35,50,.45);color:#a6b9c5;backdrop-filter:blur(12px)}
.connection:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#7b8f9d}
.connection.ok{color:#84f5db;border-color:rgba(51,230,209,.3);background:rgba(17,102,101,.16)}
.connection.ok:before{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.connection.warn{color:#ffd68b;border-color:rgba(255,198,107,.25);background:rgba(119,79,19,.18)}
.connection.warn:before{background:var(--warm);box-shadow:0 0 8px var(--warm)}
.connection-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.connect-button{padding:7px 10px;border:1px solid rgba(51,230,209,.28);background:rgba(28,125,126,.16);color:#8cf9e9;font-size:11px}
.panel{position:relative;overflow:hidden;background:linear-gradient(122deg,rgba(15,40,58,.86),rgba(5,20,33,.72));border:1px solid var(--line);border-radius:13px;padding:27px 28px;margin:16px 0;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.panel:before{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(134,240,255,.8),transparent);opacity:.65}
.panel:hover{border-color:rgba(102,205,242,.29)}
.section-title{display:flex;gap:13px;align-items:flex-start}
.section-title>span{position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#1b6e82,#174964);border:1px solid rgba(100,237,230,.36);color:#8ffef2;width:27px;height:27px;border-radius:7px;font-family:"DM Mono",monospace;font-size:12px;font-weight:500;flex:none;box-shadow:inset 0 0 14px #35e1d533,0 0 13px #30d6ce14}
.section-title h2{font-size:16px;letter-spacing:.015em;margin:2px 0 4px}
.section-title p{font-size:12px;color:var(--muted);margin:0}
.fields,.price-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.price-actions{grid-template-columns:170px 190px auto;align-items:end}
label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.025em;font-weight:500;color:#b7c9d3}
input,select{appearance:none;width:100%;height:43px;padding:0 12px;border:1px solid rgba(142,204,231,.2);border-radius:6px;background:rgba(2,17,29,.52);color:var(--ink);font:500 13px "DM Mono","Noto Sans SC",sans-serif;outline:none;transition:.18s ease}
input::placeholder{color:#587082}
input:focus,select:focus{border-color:var(--accent);background:rgba(6,31,43,.78);box-shadow:0 0 0 3px rgba(51,230,209,.09),inset 0 0 12px rgba(51,230,209,.035)}
.mode{position:relative}
.mode:after{content:"⌄";position:absolute;right:13px;bottom:10px;color:#85aabb;font:18px/1 "DM Mono",monospace;pointer-events:none}
.mode select{padding-right:34px}
.quick-dates{display:flex;gap:8px;margin-top:15px}
.channel-head{display:flex;align-items:center;gap:10px;margin-top:18px;color:#b7c9d3;font-size:12px;font-weight:600}
.channel-head button{padding:4px 9px;border:1px solid rgba(122,205,227,.18);background:rgba(54,108,132,.15);color:#9ec3d1;font-size:10px}
.channels{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;min-height:35px}
.channel-chip{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(127,204,229,.18);border-radius:7px;background:rgba(4,21,34,.5);color:#a9c2cf;font-size:11px;cursor:pointer;transition:.16s ease}
.channel-chip:hover{border-color:rgba(51,230,209,.42)}
.channel-chip:has(input:checked){color:#91fff0;border-color:rgba(51,230,209,.48);background:rgba(30,147,139,.17);box-shadow:inset 0 0 16px rgba(51,230,209,.05)}
.channel-chip input{width:12px;height:12px;margin:0;padding:0;accent-color:var(--accent)}
.browser-channel{cursor:default;color:#91fff0;border-color:rgba(51,230,209,.36);background:rgba(30,147,139,.13)}
.channel-empty{color:#647e8e;font-size:11px;padding:8px 0}
.channel-code{color:#668392;font-family:"DM Mono",monospace;font-size:9px}
.room-members{display:flex;align-items:flex-start;gap:12px;margin-top:16px;font-size:11px;color:#708b9a}
.room-members span{white-space:nowrap;color:#9bb4c2;font-weight:600}
.room-members p{margin:0;color:#718d9c;line-height:1.65}
.quick-dates button{position:relative;overflow:hidden;border:1px solid rgba(122,205,227,.15);border-radius:5px;background:rgba(54,108,132,.15);color:#9ec3d1;padding:7px 11px;font:500 11px "DM Mono",monospace}
.quick-dates button:hover,.secondary:hover{border-color:rgba(51,230,209,.45);color:#a5fff1;background:rgba(41,168,156,.16)}
button{border:0;border-radius:6px;padding:11px 15px;font:600 13px "Noto Sans SC",sans-serif;cursor:pointer;transition:.17s ease}
button:active{transform:translateY(1px)}
.secondary{height:43px;border:1px solid rgba(63,216,204,.28);background:rgba(28,125,126,.16);color:#8cf9e9}
.preview-head{display:flex;align-items:flex-start;justify-content:space-between}
.primary{position:relative;overflow:hidden;background:linear-gradient(105deg,#1acaae,#438df2);box-shadow:0 6px 20px rgba(34,189,187,.22);color:#001a23;min-width:118px}
.primary:after{content:"";position:absolute;top:-120%;left:-40%;width:25%;height:340%;transform:rotate(24deg);background:rgba(255,255,255,.48);filter:blur(4px);animation:glide 3.8s infinite}
.primary:hover{box-shadow:0 7px 30px rgba(47,217,202,.38);filter:brightness(1.08)}
.primary:disabled{cursor:not-allowed;background:#385564;color:#829aa8;box-shadow:none}
.primary:disabled:after{display:none}
.table-wrap{overflow:auto;margin:24px -4px 0;padding:0 4px}
table{width:100%;border-collapse:collapse;text-align:left;min-width:560px}
th{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.06em;color:#708b9a;font-weight:500;background:rgba(52,100,125,.12)}
td,th{padding:14px 16px;border-bottom:1px solid rgba(143,205,229,.1)}
td{font-family:"DM Mono","Noto Sans SC",sans-serif;font-size:12px;color:#c6d8e2}
tbody tr{transition:.16s ease}
tbody tr:hover{background:rgba(44,154,178,.09)}
.price{font-variant-numeric:tabular-nums;font-weight:500}
.new-price{color:#72f6df;text-shadow:0 0 12px #1fe5cb44}
.pending{font-family:"Noto Sans SC",sans-serif;font-size:11px;color:#ffcf7c;background:rgba(172,112,19,.19);border:1px solid rgba(255,198,107,.17);padding:3px 7px;border-radius:4px}
.empty td{text-align:center;color:#738998;padding:37px}
.notice{display:flex;align-items:center;gap:7px;color:#778e9c;font-size:11px;margin:16px 0 0}
.notice:before{content:"◇";color:#49d9cb}
#toast{position:fixed;z-index:10;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;background:rgba(5,30,41,.91);border:1px solid rgba(69,238,217,.4);color:#d9fffb;padding:12px 16px;border-radius:6px;box-shadow:0 10px 35px #0008;font-size:13px;backdrop-filter:blur(14px);max-width:min(92vw,560px)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{50%{transform:scale(.65);box-shadow:0 0 0 7px rgba(51,230,209,.04),0 0 20px var(--accent)}
}
@keyframes glide{0%,30%{left:-45%}
75%,100%{left:130%}
}
@keyframes floatOne{50%{transform:translate(80px,100px) scale(1.15)}
}
@keyframes floatTwo{50%{transform:translate(-95px,-55px) scale(.86)}
}
@media(max-width:720px){.shell{padding:42px 16px 55px}
header{display:block}
h1{font-size:36px}
.connection{display:inline-block;margin-top:20px}
.panel{padding:22px 17px}
.fields,.price-actions{grid-template-columns:1fr 1fr}
.price-actions .secondary{grid-column:span 2}
.preview-head{gap:18px}
.primary{white-space:nowrap}
}
@media(max-width:420px){.fields,.price-actions{grid-template-columns:1fr}
.price-actions .secondary{grid-column:auto}
.preview-head{flex-direction:column}
.primary{width:100%}
}