:root {
  --paper: #f5f7fa;
  --white: #fff;
  --ink: #182026;
  --muted: #78838d;
  --line: #e5e9ed;
  --mint: #a8f2d0;
  --mint-strong: #47c995;
  --mint-dark: #157a57;
  --blue: #7aa7f7;
  --coral: #ff9b7c;
  --yellow: #f4cf62;
  --lavender: #b8a3f2;
  --shadow: 0 16px 38px rgba(26, 43, 56, .08);
  font-family: 'Manrope', 'Noto Sans SC', sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
button:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 76px; padding: 0 5.4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.78); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.04em; font-size: 20px; }
.brand-mark { width: 31px; height: 31px; border-radius: 9px 9px 9px 3px; background: var(--ink); position: relative; }
.brand-mark::after { content: ''; position: absolute; width: 10px; height: 10px; background: var(--mint); border-radius: 50%; top: 7px; left: 7px; box-shadow: 10px 5px 0 var(--coral), 5px 14px 0 var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.pill { padding: 9px 14px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
.pill.active, .pill:hover { background: var(--ink); color: #fff; }
.main { width: min(1180px, 89vw); margin: 0 auto; padding: 48px 0 70px; flex: 1; }
.eyebrow { color: var(--mint-dark); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; margin-bottom: 15px; }
h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.065em; margin: 0; max-width: 750px; }
h2 { font-size: 21px; letter-spacing: -.04em; margin: 0; }
.subhead { color: var(--muted); margin: 14px 0 0; font-size: 15px; line-height: 1.7; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.primary { background: var(--ink); color: #fff; padding: 14px 19px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: transform .18s, background .18s; }
.primary:hover { transform: translateY(-2px); background: #303b42; }
.secondary { background: var(--white); border: 1px solid var(--line); color: var(--ink); padding: 12px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; }
.secondary:hover { border-color: var(--ink); }
.danger { width:100%; margin-top:16px; padding:11px 14px; border:1px solid #e7b9b2; border-radius:8px; background:#fff5f3; color:#a63122; font-weight:700; font-size:12px; }.danger:hover { border-color:#c94b3a; background:#ffebe7; }
.dashboard { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.panel-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title { display: flex; flex-direction: column; gap: 6px; }
.panel-title span { color: var(--muted); font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--mint-dark); font-size: 12px; font-weight: 800; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 4px #dcf9eb; }
.status.closed { color: var(--muted); }.status.closed::before { background: #b5bec5; box-shadow: 0 0 0 4px #eef0f2; }
.cloud-panel { min-height: 490px; display: flex; flex-direction: column; }
.cloud-canvas { flex: 1; min-height: 390px; position: relative; overflow: hidden; padding: 32px; background: radial-gradient(circle at 50% 45%, #fcfdfd 0, #fff 55%); }
.cloud-word-wrap { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px; transition:left .55s ease,top .55s ease,opacity .25s ease,transform .2s; opacity:1; }.cloud-word-wrap.entering,.cloud-word-wrap.leaving { opacity:0; transform:translate(-50%,-50%) scale(.72); }
.cloud-word { position:relative; font-weight:800; letter-spacing:-.06em; white-space:nowrap; transition:font-size .55s ease,color .35s ease,transform .2s; user-select:none; line-height:1; }
.word-count { font-family:'DM Mono',monospace; font-size:10px; line-height:1; color:#9aa4ab; letter-spacing:0; white-space:nowrap; transition:color .25s ease; }.cloud-word-wrap:hover .word-count { color:var(--ink); }
.cloud-word:hover { transform: translate(-50%,-50%) scale(1.08) rotate(-2deg); z-index: 3; }
.cloud-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.cloud-foot { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 14px 24px; color: var(--muted); font-size: 12px; }
.side-stack { display: flex; flex-direction: column; gap: 18px; }
.qr-panel { padding: 22px; }
.qr-title { display: flex; justify-content: space-between; align-items: start; margin-bottom: 18px; }
.qr-title small { color: var(--muted); font-size: 11px; }
.qr-code { margin: 5px auto 17px; width: 176px; height: 176px; padding: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.qr-code i { display: block; background: #eef1f3; }.qr-code i.on { background: var(--ink); }.qr-code i.corner { background: var(--ink); }
.join-url { display: flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 8px; padding: 10px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.join-url span { overflow: hidden; text-overflow: ellipsis; }.copy { color: var(--ink); background: transparent; font-size: 12px; font-weight: 800; }
.stats-panel { padding: 20px 22px; }.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 15px; }.stat { padding: 14px; border-radius: 10px; background: var(--paper); }.stat strong { display: block; font-size: 25px; letter-spacing: -.06em; }.stat span { color: var(--muted); font-size: 11px; }
.settings-panel { padding: 20px 22px; }.setting-row { display:flex; align-items:center; justify-content:space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.setting-row:last-child { border-bottom:0; padding-bottom:0; }.setting-row small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.switch { width: 37px; height: 21px; background: #d7dee2; border-radius: 999px; padding: 3px; transition:.2s; }.switch i { display:block; width:15px;height:15px;border-radius:50%; background:#fff; transition:.2s; }.switch.on { background:var(--mint-strong); }.switch.on i { transform:translateX(16px); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,29,34,.45); display: grid; place-items: center; z-index: 20; padding: 20px; }.modal { background:#fff; width:min(520px,100%); max-height:calc(100vh - 40px); overflow-y:auto; border-radius:16px; padding:28px; box-shadow:0 22px 70px rgba(0,0,0,.2); }.modal h2 { margin-bottom:6px; }.modal p { margin:0 0 23px; color:var(--muted); font-size:13px; }.field { margin-bottom: 16px; }.field label { display:block; font-size:12px; font-weight:800; margin-bottom:7px; }.field input { width:100%; border:1px solid var(--line); border-radius:8px; padding:12px; outline:none; }.field input:focus { border-color:var(--mint-strong); box-shadow:0 0 0 3px #ddf8eb; }.date-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }.hidden { display:none !important; }
.join-view { width: min(560px, 90vw); margin: 0 auto; padding: 70px 0; text-align:center; }.join-view .brand { justify-content:center; margin-bottom:46px; }.join-view h1 { font-size: clamp(32px, 7vw, 49px); margin: 0 auto; }.join-card { margin-top:30px; padding:25px; text-align:left; }.join-card label { font-weight:800; font-size:13px; display:block; margin-bottom:10px; }.join-card textarea { resize:none; width:100%; border:1px solid var(--line); border-radius:10px; min-height:105px; padding:14px; outline:none; }.join-card textarea:focus { border-color:var(--mint-strong); }.join-submit { width:100%; margin-top:13px; }.join-note { color:var(--muted); font-size:11px; line-height:1.6; text-align:center; margin:14px 0 0; }
.footer { text-align:center; padding: 18px; color: #a3adb4; font-size: 11px; }
.project-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white); box-shadow:var(--shadow); }
.project-row { width:100%; min-height:108px; padding:20px 22px; display:grid; grid-template-columns:minmax(260px,1.5fr) minmax(220px,1fr) 100px 100px 24px; gap:20px; align-items:center; text-align:left; color:var(--ink); background:var(--white); border-bottom:1px solid var(--line); transition:background .16s; }
.project-row:last-child { border-bottom:0; }.project-row:hover { background:#f8fafb; }
.project-main { min-width:0; }.project-main .status { margin-bottom:10px; }.project-main h2 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.project-id { display:block; margin-top:5px; color:var(--muted); font-family:'DM Mono',monospace; font-size:10px; }
.project-time { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:12px; }.project-metrics { text-align:right; }.project-metrics strong { display:block; font-size:22px; letter-spacing:-.04em; }.project-metrics span { color:var(--muted); font-size:11px; }.row-arrow { color:var(--muted); font-size:28px; }.empty-projects { padding:56px 24px; text-align:center; }.empty-projects p { color:var(--muted); margin:9px 0 22px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; border-radius: 999px; padding: 11px 17px; font-size: 12px; font-weight: 700; transition: .22s ease; z-index: 40; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 850px) { .dashboard { grid-template-columns: 1fr; }.side-stack { display:grid; grid-template-columns:1fr 1fr; align-items:start; }.hero-row { align-items:flex-start; flex-direction:column; }.topbar { padding:0 5vw; } }
@media (max-width: 850px) { .project-row { grid-template-columns:1fr 70px 20px; gap:12px; }.project-time { grid-column:1; }.project-metrics:nth-of-type(2) { display:none; } }
@media (max-width: 560px) { .main { padding-top:32px; }.side-stack { display:flex; }.cloud-canvas { min-height:360px; }.panel-head { padding:18px; }.cloud-foot { padding:12px 18px; }.qr-panel,.stats-panel,.settings-panel { padding:18px; }.nav-actions .pill:not(.active) { display:none; } }
.word-menu { position:fixed; z-index:50; min-width:210px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }.word-menu button { display:block; width:100%; padding:10px 12px; text-align:left; background:transparent; border-radius:7px; color:var(--ink); font-size:12px; }.word-menu button:hover { background:var(--paper); }
.captcha-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.captcha-row .secondary { min-width:112px; }
.choice-field { margin:0 0 18px; padding:0; border:0; display:flex; align-items:center; gap:20px; }.choice-field legend { margin-bottom:9px; font-size:12px; font-weight:800; }.choice-field label { display:inline-flex; align-items:center; gap:7px; margin:0; font-weight:500; }.choice-field input { accent-color:var(--mint-dark); }
.cloud-filters { min-height:54px; padding:10px 24px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); background:#fafbfc; }.cloud-filters span { margin-right:3px; color:var(--muted); font-size:12px; font-weight:700; }.cloud-filters select { min-width:120px; padding:8px 30px 8px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font:inherit; font-size:12px; }
@media (max-width:560px) { .cloud-filters { padding:10px 18px; flex-wrap:wrap; }.cloud-filters select { flex:1; min-width:110px; } }

/* Public product and information pages */
a { color:inherit; text-decoration:none; }
.home-brand { padding:0; background:transparent; color:var(--ink); }.home-page .topbar .primary { padding:11px 16px; }
.home-hero { width:min(1180px,89vw); min-height:620px; margin:0 auto; padding:74px 0 62px; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.85fr); align-items:center; gap:64px; }
.home-hero h1 { font-size:72px; letter-spacing:0; }.home-lead { margin:12px 0 0; font-size:28px; line-height:1.35; font-weight:800; }.home-copy { max-width:620px; margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.85; }.home-actions { display:flex; gap:12px; margin-top:30px; }.home-actions .secondary { display:inline-flex; align-items:center; }
.home-preview { position:relative; aspect-ratio:1.08; min-height:420px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }.preview-word { position:absolute; transform:translate(-50%,-50%); font-weight:800; white-space:nowrap; }.p1 { left:50%; top:45%; font-size:62px; color:#147b59; }.p2 { left:28%; top:30%; font-size:34px; color:#2b72c7; }.p3 { left:72%; top:31%; font-size:29px; color:#db6b48; }.p4 { left:28%; top:68%; font-size:27px; color:#7763bf; }.p5 { left:70%; top:66%; font-size:24px; color:#b27b09; }.p6 { left:53%; top:82%; font-size:18px; color:#4d5961; }
.home-band { background:#182026; color:#fff; }.home-section { width:min(1180px,89vw); margin:0 auto; padding:76px 0; }.home-section h2,.home-cta h2 { margin-top:8px; font-size:34px; letter-spacing:0; }.home-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:38px; background:#344048; border:1px solid #344048; }.home-steps article { min-height:210px; padding:28px; background:#182026; }.home-steps strong { color:var(--mint); font-family:'DM Mono',monospace; font-size:13px; }.home-steps h3,.feature-grid h3 { margin:35px 0 10px; font-size:19px; }.home-steps p,.feature-grid p { margin:0; color:#aeb8bf; font-size:14px; line-height:1.7; }
.home-features { display:grid; grid-template-columns:.8fr 1.3fr; gap:70px; align-items:start; }.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px 40px; }.feature-grid h3 { margin:0 0 9px; }.feature-grid p { color:var(--muted); }.home-cta { width:min(1180px,89vw); margin:0 auto 70px; padding:42px 46px; display:flex; align-items:center; justify-content:space-between; gap:28px; background:#dff8ed; border:1px solid #bdebd6; }.home-cta p { margin:12px 0 0; color:#52635b; }.home-cta .eyebrow { margin-bottom:0; }
.home-footer { min-height:86px; padding:24px 5.4vw; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.home-footer nav { display:flex; gap:22px; }.home-footer button { padding:0; background:transparent; color:inherit; }.seo-content { width:min(900px,89vw); margin:60px auto; }.help-content { max-width:820px; margin-top:46px; }.help-content h2 { margin:38px 0 13px; font-size:24px; letter-spacing:0; }.help-content h3 { margin:27px 0 8px; font-size:17px; }.help-content p,.help-content li { color:#59656d; font-size:15px; line-height:1.85; }.help-content ol { padding-left:24px; }.help-content li { margin:10px 0; }
@media (max-width:850px) { .home-hero { min-height:0; grid-template-columns:1fr; padding-top:54px; gap:42px; }.home-preview { min-height:360px; }.home-features { grid-template-columns:1fr; gap:38px; } }
@media (max-width:560px) { .home-page .topbar { height:68px; }.home-page .nav-actions .pill { display:none; }.home-hero { width:90vw; padding:48px 0 42px; }.home-hero h1 { font-size:52px; }.home-lead { font-size:23px; }.home-copy { font-size:15px; }.home-actions { flex-direction:column; }.home-actions .primary,.home-actions .secondary { justify-content:center; text-align:center; }.home-preview { min-height:310px; }.p1 { font-size:46px; }.home-section { width:90vw; padding:56px 0; }.home-section h2,.home-cta h2 { font-size:27px; }.home-steps,.feature-grid { grid-template-columns:1fr; }.home-steps article { min-height:160px; }.home-steps h3 { margin-top:22px; }.home-cta { width:90vw; margin-bottom:42px; padding:30px 24px; align-items:flex-start; flex-direction:column; }.home-footer { align-items:flex-start; flex-direction:column; }.home-footer nav { flex-wrap:wrap; } }