/* ===================================================================
   Personal Hub — styles.css
   Tema "Aurora": gradien ungu-biru-magenta, kaca, animasi halus.
   Variabel tema bisa diganti via [data-theme].
=================================================================== */
:root{
  --bg:#0c0e1a; --bg2:#11142a; --panel:rgba(255,255,255,.04);
  --panel-solid:#15182e; --border:rgba(255,255,255,.08);
  --text:#e8e9f3; --muted:#9aa0bf; --muted2:#6b7099;
  --brand:#8b5cf6; --brand2:#6366f1; --accent:#ec4899; --accent2:#06b6d4;
  --ok:#10b981; --warn:#f59e0b; --err:#f43f5e;
  --radius:18px; --radius-sm:12px; --shadow:0 20px 60px -20px rgba(0,0,0,.6);
  --font-d:"Fraunces",Georgia,serif; --font-b:"Plus Jakarta Sans",system-ui,sans-serif;
}
[data-theme="sunset"]{ --brand:#fb7185; --brand2:#f59e0b; --accent:#f43f5e; --accent2:#fbbf24; --bg:#16100f; --bg2:#1d1413; }
[data-theme="ocean"]{ --brand:#06b6d4; --brand2:#3b82f6; --accent:#22d3ee; --accent2:#2dd4bf; --bg:#081420; --bg2:#0b1c2c; }
[data-theme="mono"]{ --brand:#a3a3a3; --brand2:#737373; --accent:#e5e5e5; --accent2:#d4d4d4; --bg:#0a0a0a; --bg2:#141414; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-b); color:var(--text); background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb,var(--accent2) 18%,transparent), transparent 55%);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ---------- SPLASH ---------- */
.splash{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;
  background:var(--bg);z-index:50;animation:fadeIn .3s}
.splash.boot{position:static;min-height:100vh}
.splash-logo{width:84px;height:84px;border-radius:24px;object-fit:cover}
.splash-mark{display:grid;place-content:center;font-size:38px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:var(--shadow);
  animation:pulse 1.6s ease-in-out infinite}
.splash-name{font-family:var(--font-d);font-size:22px;letter-spacing:.5px}
.splash-bar{width:180px;height:4px;border-radius:99px;background:var(--border);overflow:hidden}
.splash-bar span{display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--accent));animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{margin-left:-40%}100%{margin-left:100%}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- AUTH ---------- */
.auth-screen{min-height:100vh;display:grid;place-content:center;position:relative;overflow:hidden;padding:24px}
.auth-aurora{position:absolute;inset:-30%;background:
  radial-gradient(circle at 30% 30%,var(--brand),transparent 40%),
  radial-gradient(circle at 70% 70%,var(--accent),transparent 40%);filter:blur(80px);opacity:.5;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-card{position:relative;width:min(400px,92vw);padding:36px;border-radius:24px;
  background:rgba(20,22,40,.7);backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:var(--shadow)}
.auth-mark{width:54px;height:54px;border-radius:16px;display:grid;place-content:center;font-size:24px;
  background:linear-gradient(135deg,var(--brand),var(--accent));margin-bottom:18px}
.auth-title{font-family:var(--font-d);font-size:26px;margin-bottom:6px}
.auth-sub{color:var(--muted);margin-bottom:22px;font-size:14px}
.auth-card .input{margin-bottom:12px}
.link-btn{background:none;border:none;color:var(--brand);cursor:pointer;margin-top:14px;font-size:14px}

/* ---------- SHELL ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;padding:20px 14px;display:flex;flex-direction:column;gap:6px;
  background:rgba(10,12,24,.6);backdrop-filter:blur(16px);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;cursor:pointer}
.brand-logo{width:36px;height:36px;border-radius:11px;object-fit:cover}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-content:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--accent))}
.brand-name{font-family:var(--font-d);font-size:18px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:3px}
.nav-spacer{flex:1}
.nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--muted);
  text-decoration:none;font-size:14px;font-weight:500;border:none;background:none;cursor:pointer;width:100%;text-align:left;
  transition:background .15s,color .15s}
.nav-link:hover{background:var(--panel);color:var(--text)}
.nav-link.active{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 30%,transparent),color-mix(in srgb,var(--accent) 20%,transparent));color:#fff}
.nav-icon{width:22px;text-align:center;font-size:16px}
.logout{color:var(--err)}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:none;align-items:center;gap:12px;padding:12px 16px;position:sticky;top:0;z-index:20;
  background:rgba(12,14,26,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar-title{font-family:var(--font-d);font-size:17px;flex:1}
.fab-chat{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;color:#fff;font-size:18px;
  background:linear-gradient(135deg,var(--brand),var(--accent))}
.outlet{padding:28px clamp(16px,4vw,40px);flex:1;min-width:0}
.menu-btn,.nav-scrim{display:none}

/* ---------- PAGE ---------- */
.page-fade{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.page-in{opacity:1;transform:none}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-title{font-family:var(--font-d);font-size:clamp(24px,4vw,34px);font-weight:600;letter-spacing:-.5px}
.page-sub{color:var(--muted);margin-top:4px}
.page-head-right{display:flex;gap:8px}

/* ---------- BUTTONS / FORM ---------- */
.btn{padding:9px 16px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);
  cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;transition:transform .1s,filter .15s,background .15s}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.5;cursor:wait}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--accent));border:none;color:#fff}
.btn.ghost{background:transparent}
.btn.danger{background:color-mix(in srgb,var(--err) 18%,transparent);border-color:transparent;color:var(--err)}
.btn.full{width:100%} .btn-row{display:flex;gap:10px} .btn-row .btn{flex:1}
.icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px 8px;border-radius:9px;font-size:15px;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--panel);color:var(--text)} .icon-btn.danger:hover{color:var(--err)}
.input{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.2);
  color:var(--text);font-family:inherit;font-size:14px;transition:border .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.textarea{resize:vertical;min-height:90px}
.field{display:block;margin-bottom:14px} .field-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.hint{font-size:12.5px;color:var(--muted2);margin-top:6px}
.check-field{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:14px}
.check-field input{width:auto}

/* ---------- CARDS / GRID / PANEL ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;backdrop-filter:blur(8px)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px;backdrop-filter:blur(8px)}
.panel h3{font-family:var(--font-d);font-size:18px;margin-bottom:14px}
.muted{color:var(--muted)} .muted.small,.small{font-size:12.5px} .big-muted{font-size:18px;margin:8px 0}

/* ---------- STATS / DASHBOARD ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px}
.stat-card{text-align:left;border:1px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;color:var(--text);
  background:var(--panel);position:relative;overflow:hidden;transition:transform .15s}
.stat-card:hover{transform:translateY(-3px)}
.stat-card::after{content:"";position:absolute;inset:auto -20% -40% auto;width:120px;height:120px;border-radius:50%;filter:blur(28px);opacity:.5}
.stat-card.v1::after{background:var(--brand)} .stat-card.v2::after{background:var(--accent)}
.stat-card.v3::after{background:var(--ok)} .stat-card.v4::after{background:var(--accent2)}
.stat-k{color:var(--muted);font-size:13px;font-weight:600} .stat-v{font-family:var(--font-d);font-size:38px;margin:4px 0}
.stat-sub{color:var(--muted2);font-size:12.5px}
.dash-lower{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mood-row{display:flex;align-items:flex-end;gap:8px;height:110px}
.mood-bar{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--brand),var(--accent2));min-height:6px;transition:height .4s}
.date-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.date-list li{display:flex;align-items:center;gap:10px}
.date-chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--brand) 25%,transparent);color:#fff}

/* ---------- SKELETON ---------- */
.skeleton-line{height:13px;border-radius:7px;margin:9px 0;
  background:linear-gradient(90deg,var(--panel),rgba(255,255,255,.12),var(--panel));background-size:200% 100%;animation:shimmer 1.3s infinite}
.skeleton-card{min-height:120px} @keyframes shimmer{to{background-position:-200% 0}}

/* ---------- TOAST ---------- */
.toast-root{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:1000}
.toast{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:13px;background:var(--panel-solid);
  border:1px solid var(--border);box-shadow:var(--shadow);transform:translateX(120%);transition:transform .3s;font-size:14px;max-width:330px}
.toast.show{transform:none}
.toast-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--accent2)}
.toast-success .toast-dot{background:var(--ok)} .toast-error .toast-dot{background:var(--err)} .toast-warn .toast-dot{background:var(--warn)}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(4,6,16,.6);backdrop-filter:blur(4px);display:grid;place-items:center;
  z-index:500;opacity:0;transition:opacity .2s;padding:16px}
.modal-overlay.show{opacity:1}
.modal-box{width:100%;background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
  max-height:90vh;display:flex;flex-direction:column;transform:translateY(14px) scale(.98);transition:transform .2s}
.modal-overlay.show .modal-box{transform:none}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{font-family:var(--font-d);font-size:19px}
.modal-body{padding:20px;overflow-y:auto}
.modal-foot{padding:16px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* ---------- EMPTY / ERROR ---------- */
.empty-state{text-align:center;padding:54px 20px;color:var(--muted)}
.empty-mark{font-size:42px;margin-bottom:12px;background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.empty-state h3{font-family:var(--font-d);color:var(--text);font-size:20px;margin-bottom:6px}
.empty-state .btn{margin-top:16px}
.error-state{text-align:center;padding:40px;color:var(--err)}

/* ---------- DATATABLE ---------- */
.dt-toolbar{margin-bottom:14px} .dt-search{max-width:320px}
.dt-list{display:flex;flex-direction:column;gap:8px}
.dt-row{display:grid;grid-template-columns:140px 1fr auto auto auto;gap:14px;align-items:center;padding:14px 16px;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;transition:border .15s}
.dt-row.clickable{cursor:pointer} .dt-row.clickable:hover{border-color:var(--brand)}
.dt-date{font-weight:600;font-size:13px} .dt-excerpt{color:var(--muted);font-size:12.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.dt-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.dt-pager{display:flex;gap:6px}

/* ---------- QUOTE CARDS (notes) ---------- */
.note-cell{position:relative} .note-tools{display:flex;gap:4px;justify-content:flex-end;margin-top:8px;opacity:0;transition:opacity .15s}
.note-cell:hover .note-tools{opacity:1}
.quote-card{position:relative;border-radius:18px;padding:30px 26px;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff}
.quote-card.big{width:540px;min-height:300px;padding:48px}
.qc-glow{position:absolute;inset:0;opacity:.85;z-index:0}
.quote-card>*{position:relative;z-index:1}
.bg-aurora .qc-glow{background:linear-gradient(135deg,#7c3aed,#db2777,#2563eb)}
.bg-sunset .qc-glow{background:linear-gradient(135deg,#f59e0b,#ef4444,#db2777)}
.bg-ocean .qc-glow{background:linear-gradient(135deg,#0ea5e9,#2563eb,#0891b2)}
.bg-forest .qc-glow{background:linear-gradient(135deg,#059669,#15803d,#064e3b)}
.bg-ink .qc-glow{background:linear-gradient(135deg,#1e293b,#334155,#0f172a)}
.bg-rose .qc-glow{background:linear-gradient(135deg,#fb7185,#e11d48,#9f1239)}
.bg-gold .qc-glow{background:linear-gradient(135deg,#fbbf24,#d97706,#92400e)}
.font-serif .qc-body{font-family:var(--font-d)} .font-sans .qc-body{font-family:var(--font-b)}
.font-mono .qc-body{font-family:ui-monospace,monospace} .font-script .qc-body{font-family:"Brush Script MT",cursive}
.qc-body{font-size:21px;line-height:1.5;font-weight:500} .quote-card.big .qc-body{font-size:30px}
.qc-body.poem{font-size:18px;line-height:1.7}
.qc-author{font-size:14px;opacity:.85;font-style:italic} .qc-title{font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:1px}
.card-preview{display:grid;place-items:center;background:rgba(0,0,0,.2);border-radius:16px;padding:20px}
.notes-editor{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.change-list{margin:0 0 14px 18px;color:var(--muted);font-size:13px} .suggest-box{background:rgba(0,0,0,.25);padding:14px;border-radius:12px;white-space:pre-wrap;font-size:14px;line-height:1.6}
.ai-chip{font-size:12.5px;padding:5px 11px}

/* ---------- KANBAN (ideas) ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kanban-col{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;min-height:200px}
.kanban-head{display:flex;justify-content:space-between;font-weight:700;font-size:13px;margin-bottom:12px;color:var(--muted)}
.kanban-head .count{background:var(--panel);padding:1px 8px;border-radius:99px;font-size:11px}
.idea-card{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer;transition:border .15s}
.idea-card:hover{border-color:var(--brand)} .idea-card p{font-size:13.5px;margin-bottom:8px}
.idea-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--warn)}

/* ---------- TODO ---------- */
.todo-wrap{display:flex;flex-direction:column;gap:8px}
.todo-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;border-left:3px solid var(--muted2)}
.todo-item.prio-high{border-left-color:var(--warn)} .todo-item.prio-urgent{border-left-color:var(--err)}
.todo-item.done{opacity:.5} .todo-item.done .todo-title{text-decoration:line-through}
.todo-item.overdue{border-left-color:var(--err);background:color-mix(in srgb,var(--err) 8%,transparent)}
.check{width:24px;height:24px;border-radius:7px;border:2px solid var(--border);background:none;cursor:pointer;color:var(--ok);font-weight:800;flex-shrink:0}
.todo-main{flex:1;cursor:pointer} .todo-title{font-weight:600;font-size:14.5px} .todo-due{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- VAULT ---------- */
.vault-list{display:flex;flex-direction:column;gap:8px}
.vault-item{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:border .15s}
.vault-item:hover{border-color:var(--brand)}
.vault-ico{width:40px;height:40px;border-radius:12px;display:grid;place-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--accent2));flex-shrink:0}
.vault-meta{flex:1;display:flex;flex-direction:column;gap:2px} .vault-acts{display:flex;gap:2px}
.reveal-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.reveal-row span:first-child{width:46px;color:var(--muted);font-size:12px} .reveal-row code{flex:1;font-size:14px;word-break:break-all}

/* ---------- DATES ---------- */
.date-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.date-card{display:flex;gap:14px;align-items:center;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:16px}
.date-card.soon{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.date-badge{width:58px;height:58px;border-radius:14px;display:grid;place-content:center;text-align:center;font-weight:800;font-size:13px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.date-info{flex:1} .date-acts{display:flex;flex-direction:column;gap:2px}

/* ---------- CATEGORIES ---------- */
.cat-group{margin-bottom:22px} .cat-group h3{font-family:var(--font-d);font-size:16px;margin-bottom:10px;color:var(--muted)}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.cat-chip{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--border);font-size:13.5px}
.cat-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.cat-chip .mini{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px} .cat-chip .mini.danger:hover{color:var(--err)}
.swatches{display:flex;gap:8px;flex-wrap:wrap} .swatch{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer} .swatch.on{border-color:#fff}

/* ---------- BACKUP LOG ---------- */
.log-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.log-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--panel);border-radius:12px;font-size:13px}
.log-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} .log-row.error .log-dot{background:var(--err)}
.log-mode{color:var(--muted);font-size:11px;text-transform:uppercase} .log-status{margin-left:auto;font-weight:600}

/* ---------- CHAT ---------- */
.chat-shell{display:flex;flex-direction:column;height:calc(100vh - 200px);min-height:420px;background:var(--panel);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.chat-stream{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.chat-hello{text-align:center;margin:auto;color:var(--muted)} .hello-mark{font-size:40px;margin-bottom:10px}
.bubble{max-width:75%;padding:12px 16px;border-radius:16px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;animation:fadeIn .25s}
.bubble.user{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;border-bottom-right-radius:5px}
.bubble.assistant{align-self:flex-start;background:rgba(0,0,0,.25);border:1px solid var(--border);border-bottom-left-radius:5px}
.bubble.typing{opacity:.6}
.chat-composer{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border)}
.chat-input{flex:1;resize:none;max-height:120px} .chat-composer .btn{padding:0 18px}

/* ---------- SETTINGS ---------- */
.upload-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prev-img{width:54px;height:54px;border-radius:13px;object-fit:cover;background:var(--panel);border:1px solid var(--border)}
.prev-img.sm{width:34px;height:34px;border-radius:9px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .topbar{display:flex} .menu-btn{display:block}
  .outlet{padding:18px}
  .notes-editor{grid-template-columns:1fr} .kanban{grid-template-columns:1fr 1fr}
  .dt-row{grid-template-columns:1fr auto;gap:8px} .dt-cell[data-label="Mood"],.dt-cell[data-label="Kata"]{display:none}
  .form .row-2{grid-template-columns:1fr}
}
@media (max-width:520px){ .kanban{grid-template-columns:1fr} .bubble{max-width:88%} .quote-card.big{width:92vw} }