/* ============================================================
   ช่วยเพื่อนจรจัด · JohnJust — app (v2)
   Responsive: mobile phone-frame  ⇄  desktop console
   Same design language across both views.
   ============================================================ */

:root{
  --brand:#1FA98D; --brand-dark:#16876F; --brand-deeper:#0F6B58;
  --brand-pale:#E8F5F1; --brand-pale-2:#D6EDE6;
  --banner-from:#2E9E8C; --banner-to:#136E61;

  --danger:#E5484D; --danger-pale:#FCE9E9;
  --warning:#F4922E; --warning-pale:#FCEFE0;
  --amber:#F2B53C; --amber-pale:#FDF4DD;
  --info:#4C8DD6; --info-pale:#E6EFFB;
  --purple:#8A6FE0; --purple-pale:#EDE9FB;
  --normal:#2BA36B;

  --bg:#ECF0F1; --surface:#FFFFFF; --surface-2:#F6F8F8;
  --ink:#1E2A2D; --ink-2:#5B6B70; --ink-3:#93A0A4;
  --line:#ECEFF0; --line-2:#E1E6E7;

  --shadow-sm:0 1px 3px rgba(20,40,40,.06);
  --shadow:0 4px 16px rgba(20,50,45,.08);
  --shadow-lg:0 14px 40px rgba(15,50,45,.16);
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --ff:'Prompt','Noto Sans Thai',-apple-system,system-ui,sans-serif;

  --sidebar-w:248px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--ff);color:var(--ink);
  background:
    radial-gradient(1000px 700px at 15% -8%, #d8efe9 0%, transparent 55%),
    radial-gradient(900px 700px at 108% 8%, #e7e2f6 0%, transparent 50%),
    linear-gradient(160deg,#eef3f3 0%, #e3eaea 100%);
  min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;align-items:center;
  padding:74px 16px 28px;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:radial-gradient(circle at 12px 10px, rgba(31,169,141,.05) 4px, transparent 5px);
  background-size:60px 60px}
button{font-family:inherit}
img{display:block}

/* ---------------- device toggle (page chrome) ---------------- */
.devbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:30px;padding:6px 6px 6px 16px;box-shadow:var(--shadow)}
.devbar .db-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--brand-deeper);padding-right:6px}
.devbar .db-brand svg{width:18px;height:18px}
.devseg{display:flex;background:var(--surface-2);border-radius:22px;padding:3px}
.devseg button{border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--ink-3);padding:7px 15px;border-radius:18px;transition:.18s}
.devseg button svg{width:16px;height:16px}
.devseg button.on{background:var(--brand);color:#fff;box-shadow:0 3px 8px rgba(20,140,115,.32)}
.devbar .db-live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:500;padding-right:8px}
.devbar .db-live i{width:8px;height:8px;border-radius:50%;background:var(--normal);box-shadow:0 0 0 0 rgba(43,163,107,.5);animation:livedot 2s infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(43,163,107,.5)}70%{box-shadow:0 0 0 7px rgba(43,163,107,0)}100%{box-shadow:0 0 0 0 rgba(43,163,107,0)}}

/* ---------------- frame (shared shell) ---------------- */
.frame{position:relative;z-index:1;background:var(--bg);overflow:hidden;display:flex;
  box-shadow:var(--shadow-lg);transition:width .45s cubic-bezier(.5,.1,.2,1), height .45s cubic-bezier(.5,.1,.2,1)}

/* MOBILE view */
body.view-mobile .frame{width:390px;height:844px;max-height:calc(100vh - 100px);
  flex-direction:column;border-radius:46px;box-shadow:var(--shadow-lg),0 0 0 11px #0e1718,0 0 0 13px #232f30}
body.view-mobile .dsk-sidebar,body.view-mobile .dsk-topbar{display:none}

/* DESKTOP view */
body.view-desktop .frame{width:min(1200px,calc(100vw - 32px));height:min(780px,calc(100vh - 110px));
  flex-direction:row;border-radius:18px;border:1px solid rgba(0,0,0,.06)}
body.view-desktop .statusbar,body.view-desktop .bottomnav{display:none}
body.view-desktop .phone-only{display:none!important}

.stage{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}

/* ---------------- status bar (mobile) ---------------- */
.statusbar{flex-shrink:0;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px 0 30px;font-weight:600;font-size:15px;letter-spacing:.3px;color:var(--ink);position:relative;z-index:30}
.sb-right{display:flex;align-items:center;gap:7px}

/* ---------------- screens ---------------- */
.screens{position:relative;flex:1;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease,visibility .28s;overflow:hidden}
.screen.active{opacity:1;visibility:visible;transform:none}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}
.pad{padding:16px}
.fade-pad{height:14px}
.desk-only{display:none}

.stagger>*{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
.stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.10s}.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}.stagger>*:nth-child(6){animation-delay:.22s}
.stagger>*:nth-child(7){animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------------- generic chrome ---------------- */
.iconbtn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);position:relative;flex-shrink:0}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:21px;height:21px;stroke-width:1.9}
.iconbtn.ghost{background:transparent;box-shadow:none}
.dot-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}

.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line)}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 12px}
.sec-head h2{font-size:18px;font-weight:600;letter-spacing:-.2px}
.sec-head .more{display:flex;align-items:center;gap:3px;color:var(--brand);font-size:13px;font-weight:500;cursor:pointer}
.sec-head .more svg{width:15px;height:15px}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;line-height:1.4;white-space:nowrap}
.b-danger{background:var(--danger);color:#fff}.b-warning{background:var(--warning);color:#fff}
.b-amber{background:var(--amber);color:#5b4406}.b-normal{background:var(--normal);color:#fff}
.b-purple{background:var(--purple);color:#fff}.b-soft-green{background:var(--brand-pale);color:var(--brand-deeper)}

.bg-green{background:var(--brand-pale);color:var(--brand-deeper)}.bg-purple{background:var(--purple-pale);color:var(--purple)}
.bg-red{background:var(--danger-pale);color:var(--danger)}.bg-orange{background:var(--warning-pale);color:var(--warning)}
.bg-amber{background:var(--amber-pale);color:#b07d10}.bg-blue{background:var(--info-pale);color:var(--info)}
.bg-pink{background:#fce9ef;color:#d4728c}

.ph-dog{background:linear-gradient(160deg,#f3e6d2,#e7d3b6)}.ph-cat{background:linear-gradient(160deg,#e7e0f0,#d8cee9)}
.ph-dog2{background:linear-gradient(160deg,#e9ddcb,#d9c4a4)}.ph-grey{background:linear-gradient(160deg,#eceff0,#dde3e4)}

/* ---------------- bottom nav (mobile) ---------------- */
.bottomnav{flex-shrink:0;height:74px;background:var(--surface);border-top:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-around;padding-top:9px;position:relative;z-index:25;box-shadow:0 -4px 20px rgba(20,50,45,.05)}
.navitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;
  color:var(--ink-3);font-size:11px;font-weight:500;position:relative}
.navitem svg{width:24px;height:24px;stroke-width:1.8}
.navitem.active{color:var(--brand)}
.navitem .nav-dot{position:absolute;top:-3px;right:24px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.fab{flex:0 0 64px;display:flex;justify-content:center;margin-top:-26px}
.fab button{width:62px;height:62px;border-radius:50%;border:4px solid var(--surface);cursor:pointer;
  background:linear-gradient(150deg,var(--brand),var(--brand-dark));color:#fff;display:grid;place-items:center;box-shadow:0 10px 22px rgba(20,140,115,.42)}
.fab button:active{transform:scale(.93)}.fab svg{width:30px;height:30px;stroke-width:2.4}

/* ---------------- desktop sidebar + topbar ---------------- */
.dsk-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px}
.dsk-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px}
.dsk-brand .brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--brand),var(--brand-dark));
  display:grid;place-items:center;box-shadow:0 6px 14px rgba(20,140,115,.32)}
.dsk-brand .brand-mark svg{width:23px;height:23px;color:#fff}
.dsk-brand .t1{font-size:16px;font-weight:700;letter-spacing:-.3px;line-height:1.1}
.dsk-brand .t2{font-size:11px;color:var(--ink-2)}
.dsk-report{margin:2px 6px 16px;border:none;cursor:pointer;font-weight:600;font-size:14px;color:#fff;
  padding:13px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 8px 18px rgba(20,140,115,.34)}
.dsk-report svg{width:18px;height:18px;stroke-width:2.4}
.dsk-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.dsk-nav .di{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;cursor:pointer;color:var(--ink-2);
  font-size:14px;font-weight:500;border:none;background:none;text-align:left;position:relative;width:100%}
.dsk-nav .di svg{width:21px;height:21px;stroke-width:1.9}
.dsk-nav .di:hover{background:var(--surface-2)}
.dsk-nav .di.active{background:var(--brand-pale);color:var(--brand-deeper);font-weight:600}
.dsk-nav .di .di-dot{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--danger);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.dsk-userchip{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--surface-2);cursor:pointer;margin-top:8px}
.dsk-userchip .ava{width:40px;height:40px;border-radius:50%;background:var(--brand-pale);display:grid;place-items:center;font-size:20px}
.dsk-userchip .uu1{font-size:13.5px;font-weight:600;line-height:1.1}
.dsk-userchip .uu2{font-size:11px;color:var(--ink-2)}

.dsk-topbar{flex-shrink:0;height:64px;display:flex;align-items:center;gap:14px;padding:0 24px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.dsk-topbar .tt{font-size:19px;font-weight:700;letter-spacing:-.3px}
.dsk-topbar .tt small{display:block;font-size:11.5px;font-weight:400;color:var(--ink-2);letter-spacing:0}
.dsk-search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:22px;padding:9px 15px;width:280px;color:var(--ink-3);font-size:13px}
.dsk-search svg{width:16px;height:16px}

/* desktop content width helper */
.dwrap{max-width:980px;margin:0 auto;width:100%}

/* ====== component styles continue in app.components.css ====== */