/* ============================================================
   Jantform — design system + components (Blade re-skin)
   Ported from eform-design/Jantform/styles.css + component
   inline styles. Used by resources/views/jantform/*.
   ============================================================ */
:root{
  --brand:#0E2396; --brand-2:#3a6fd8; --brand-700:#0a1b73;
  --brand-grad:linear-gradient(120deg,#0E2396 0%,#3a6fd8 100%);
  --brand-soft:#eef1fc; --brand-soft-2:#e3e8fb;
  --ink:#171a2b; --ink-2:#475069; --ink-3:#7a8298;
  --line:#e7e9f1; --line-2:#eef0f6;
  --canvas:#f6f7fb; --surface:#ffffff; --surface-2:#fafbff;
  --ok:#1f9d57; --ok-soft:#e6f5ec;
  --warn:#c77800; --warn-soft:#fdf2e0;
  --danger:#d5362f; --danger-soft:#fdecec;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(20,26,60,.05), 0 1px 3px rgba(20,26,60,.06);
  --sh-2:0 4px 14px rgba(20,26,60,.08), 0 2px 6px rgba(20,26,60,.05);
  --sh-3:0 18px 48px rgba(15,23,80,.18), 0 6px 16px rgba(15,23,80,.10);
  --sh-pop:0 12px 36px rgba(20,26,60,.16);
  --ff:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* reset within the jantform shell so we don't fight Bootstrap globally.
   jantform.css is only loaded on Jantform/login/publish pages (never the
   legacy Bootstrap pages), so zeroing html/body margins here is safe. */
html:has(body.jf), body.jf{margin:0;padding:0;}
.jf *{box-sizing:border-box;}
.jf{font-family:var(--ff);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;padding:0;min-height:100vh;}
.jf button:not(.btn){font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.jf button.btn{font-family:inherit;}
.jf input,.jf textarea,.jf select{font-family:inherit;font-size:14px;color:var(--ink);}
.jf a{color:inherit;text-decoration:none;}
/* Button colours must win over the `.jf a` colour reset (anchors used as
   buttons) without out-specifying nav/tab active states. */
.jf .btn-primary,.jf .btn-grad{color:#fff;}
.jf .btn-ghost{color:var(--ink);}
.jf .btn-soft{color:var(--brand);}
.jf .btn-quiet{color:var(--ink-2);}
.jf .btn-quiet:hover{color:var(--brand);}
.jf .btn-danger{color:var(--danger);}
/* Active filter chip (anchor) — keep white text over the .jf a colour reset. */
.jf .chip-active{color:#fff;}
.jf ::selection{background:rgba(58,111,216,.22);}
.jf-icon{display:block;flex:none;}

/* scrollbars */
.jf *::-webkit-scrollbar{width:10px;height:10px;}
.jf *::-webkit-scrollbar-thumb{background:#d6d9e6;border-radius:20px;border:2px solid transparent;background-clip:padding-box;}
.jf *::-webkit-scrollbar-thumb:hover{background:#bcc1d6;background-clip:padding-box;}

.wordmark{font-weight:800;letter-spacing:-.035em;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.08em;}
.mono{font-family:var(--mono);}
.muted{color:var(--ink-3);}
.hairline{height:1px;background:var(--line);border:0;margin:0;}

/* focus */
.focus-ring:focus-visible,.jf input:focus-visible,.jf textarea:focus-visible,.jf select:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(58,111,216,.25);border-color:var(--brand-2)!important;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;border-radius:10px;padding:9px 15px;transition:.16s ease;white-space:nowrap;line-height:1;border:none;cursor:pointer;}
.btn:active{transform:translateY(.5px);}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(14,35,150,.4),inset 0 1px 0 rgba(255,255,255,.12);}
.btn-primary:hover{background:#0c1f86;box-shadow:0 4px 14px rgba(14,35,150,.32);}
.btn-grad{background:var(--brand-grad);color:#fff;box-shadow:0 4px 14px rgba(14,35,150,.28);}
.btn-grad:hover{filter:brightness(1.05);box-shadow:0 6px 20px rgba(14,35,150,.34);}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-1);}
.btn-ghost:hover{background:var(--surface-2);border-color:#d8dcea;}
.btn-soft{background:var(--brand-soft);color:var(--brand);}
.btn-soft:hover{background:var(--brand-soft-2);}
.btn-quiet{background:transparent;color:var(--ink-2);}
.btn-quiet:hover{background:var(--brand-soft);color:var(--brand);}
.btn-danger{background:#fff;color:var(--danger);border:1px solid #f3c9c7;}
.btn-danger:hover{background:var(--danger-soft);}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px;}
.btn-lg{padding:12px 20px;font-size:15px;border-radius:12px;}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;line-height:1.2;}
.badge-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok);}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite;}
.badge-draft{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef0f6;color:var(--ink-3);}
.badge-archived{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,87,.45);}70%{box-shadow:0 0 0 5px rgba(31,157,87,0);}100%{box-shadow:0 0 0 0 rgba(31,157,87,0);}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.14s;}
.chip-out{background:#fff;border-color:var(--line);color:var(--ink-2);}
.chip-out:hover{border-color:#cdd2e6;background:var(--surface-2);}
.chip-active{background:var(--brand);color:#fff;border-color:transparent;}

/* card */
.card-jf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);}

/* toggle */
.toggle{width:40px;height:23px;border-radius:999px;background:#d3d7e6;position:relative;transition:.18s;flex:none;display:inline-block;}
.toggle.on{background:var(--brand);}
.toggle .knob{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.toggle.on .knob{left:19.5px;}

/* inputs */
.field{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:14px;background:#fff;transition:.14s;color:var(--ink);}
.field::placeholder{color:#a7adc2;}
.field:hover{border-color:#d3d8ea;}
.label{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px;display:block;}

/* animations */
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.anim-pop{animation:pop .22s cubic-bezier(.2,.8,.3,1);}
.anim-fade{animation:fade .2s ease;}

/* ============================================================
   App shell
   ============================================================ */
.jf-shell{display:flex;min-height:100vh;}
.jf-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.jf-content{flex:1;min-height:0;overflow:auto;}
.jf-page{padding:30px 36px 60px;max-width:1180px;margin:0 auto;}
.jf-page.jf-page--full{max-width:none;}
.jf-page-head{margin-bottom:22px;}
.jf-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-3);margin-bottom:14px;}
.jf-back:hover{color:var(--brand);}
.jf-h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0;}
.jf-sub{color:var(--ink-2);margin-top:6px;font-size:14.5px;}

/* sidebar */
.jf-sidebar{width:252px;flex:none;border-right:1px solid var(--line);background:#fff;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease;}
.jf-sidebar.collapsed{width:0;}
.jf-sb-top{padding:18px 18px 12px;}
.jf-logo{display:flex;align-items:center;gap:9px;padding:2px 4px 16px;}
.jf-logo img{width:30px;height:auto;display:block;}
.jf-sb-section{padding:6px 12px 6px 18px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin-top:4px;}
.jf-nav{padding:2px 12px;display:flex;flex-direction:column;gap:2px;}
.jf-nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font-size:14.5px;font-weight:600;text-align:left;width:100%;transition:.14s;background:transparent;color:var(--ink-2);}
.jf-nav-item:hover{background:var(--brand-soft);}
.jf-nav-item.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(14,35,150,.28);}
.jf-nav-item .lbl{flex:1;}
.jf-nav-count{font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:#eef0f6;color:var(--ink-3);}
.jf-nav-item.active .jf-nav-count{background:rgba(255,255,255,.22);color:#fff;}
.jf-nav-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--brand-soft);color:var(--brand);}
.jf-nav-item.active .jf-nav-badge{background:rgba(255,255,255,.22);color:#fff;}
.jf-tags{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:14px;}
.jf-tags-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px 6px;}
.jf-tags-head span{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;}
.jf-tags-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 12px 8px;display:flex;flex-direction:column;gap:1px;}
.jf-tag-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;cursor:pointer;transition:.12s;}
.jf-tag-row:hover{background:var(--surface-2);}
.jf-tag-row.active{background:var(--brand-soft);}
.jf-tag-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.jf-tag-name{flex:1;font-size:13.5px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jf-tag-row.active .jf-tag-name{color:var(--brand);}
.jf-tag-count{font-size:11.5px;font-weight:700;color:var(--ink-3);}
.jf-sb-foot{padding:16px;}
.jf-offline{background:var(--brand-soft);border-radius:12px;padding:13px 14px;}
.jf-offline-t{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--brand);}
.jf-offline-d{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.4;}
.jf-ver{font-size:11.5px;color:var(--ink-3);margin-top:12px;padding-left:4px;}

/* topbar */
.jf-topbar{height:60px;flex:none;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;padding:0 22px;}
.jf-search{position:relative;width:340px;max-width:40vw;}
.jf-search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:flex;}
.jf-search input{padding-left:38px;background:var(--surface-2);height:38px;border-radius:10px;}
.jf-iconbtn{padding:8px;border-radius:10px;color:var(--ink-2);display:flex;position:relative;background:transparent;}
.jf-iconbtn:hover{background:var(--brand-soft);color:var(--brand);}
.jf-notif-dot{position:absolute;top:3px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);border:2px solid #fff;color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;}
.jf-profile-btn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--line);background:#fff;transition:.14s;}
.jf-profile-btn:hover{background:var(--surface-2);}
.jf-avatar{border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;letter-spacing:-.01em;background:var(--brand);}

/* dropdown menus */
.jf-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:14px;box-shadow:var(--sh-pop);border:1px solid var(--line);z-index:95;overflow:hidden;}
.jf-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);background:transparent;}
.jf-menu-item:hover{background:var(--brand-soft);color:var(--brand);}
.jf-menu-item.danger{color:var(--danger);}
.jf-menu-item.danger:hover{background:var(--danger-soft);color:var(--danger);}

/* form tile (category-colored icon) */
.jf-tile{border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;}

/* ============================================================
   Dashboard / form cards
   ============================================================ */
.jf-page-head.jf-page-head--row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.jf-head-actions{display:flex;align-items:center;gap:10px;flex:none;}

/* workspace KPI stat cards (horizontal: icon + figure) */
.jf-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
@media(max-width:1100px){.jf-statgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.jf-statgrid{grid-template-columns:1fr;}}
.jf-statcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 20px;display:flex;align-items:center;gap:15px;}
.jf-statcard .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;}
.jf-statcard .fig{min-width:0;}
.jf-statcard .num{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.05;}
.jf-statcard .lbl{font-size:13px;font-weight:700;color:var(--ink-2);margin-top:3px;}
.jf-statcard .sub{font-size:11.5px;color:var(--ink-3);font-weight:500;}

/* toolbar: chips left, controls right */
.jf-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.jf-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.jf-tools-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}

/* segmented toggle (All / Live / Draft) */
.jf-seg{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;}
.jf-seg a{font-size:13px;font-weight:600;color:var(--ink-2);padding:6px 13px;border-radius:7px;transition:.14s;}
.jf-seg a:hover{color:var(--ink);}
.jf-seg a.active{background:#fff;color:var(--brand);box-shadow:var(--sh-1);}

/* sort dropdown trigger */
.jf-sort{position:relative;}
.jf-sortbtn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 13px;box-shadow:var(--sh-1);transition:.14s;}
.jf-sortbtn:hover{border-color:#d3d8ea;background:var(--surface-2);}
.jf-sort .jf-menu{min-width:180px;padding:6px;}

/* view-mode toggle (list / grid) */
.jf-viewtoggle{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;}
.jf-viewtoggle button{width:34px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:.14s;}
.jf-viewtoggle button:hover{color:var(--ink);}
.jf-viewtoggle button.active{background:#fff;color:var(--brand);box-shadow:var(--sh-1);}

/* forms list (table) view */
.jf-ftable-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;}
.jf-ftable{width:100%;border-collapse:collapse;}
.jf-ftable thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.jf-ftable tbody td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
.jf-ftable tbody tr:last-child td{border-bottom:none;}
.jf-ftable tbody tr{transition:background .12s;}
.jf-ftable tbody tr:hover td{background:var(--surface-2);}
.jf-ftable .col-name{min-width:280px;}
.jf-ftable .fname{display:flex;align-items:center;gap:13px;}
.jf-ftable .fname-tile{position:relative;flex:none;}
.jf-ftable .fname-tile .jf-pend{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);border:2px solid #fff;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;}
.jf-ftable .fname-main{min-width:0;}
.jf-ftable .fname-title{font-weight:700;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.jf-ftable .fname-sub{font-size:12px;color:var(--ink-3);margin-top:3px;}
.jf-ftable .fsubs b{font-size:16px;font-weight:800;}
.jf-ftable .fsubs span{font-size:12px;color:var(--ink-3);font-weight:600;margin-left:5px;}
.jf-ftable .row-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end;}
.jf-ftable .jf-fav{position:static;}
.jf-rowcheck{width:17px;height:17px;border-radius:5px;border:1.6px solid #cdd2e6;background:#fff;cursor:pointer;flex:none;appearance:none;-webkit-appearance:none;transition:.12s;position:relative;}
.jf-rowcheck:checked{background:var(--brand);border-color:var(--brand);}
.jf-rowcheck:checked::after{content:"";position:absolute;top:1px;left:5px;display:block;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* listing footer (rows per page + pagination) */
.jf-list-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;}
.jf-list-foot .info{font-size:13px;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:8px;}
.jf-list-foot .info select{border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff;font-weight:600;}
.jf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.jf-fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .14s,transform .14s;position:relative;}
.jf-fcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
.jf-fcard-top{display:flex;align-items:flex-start;gap:12px;}
.jf-fcard-title{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink);}
.jf-fcard-meta{font-size:12.5px;color:var(--ink-3);margin-top:3px;}
.jf-fcard-stats{display:flex;align-items:center;gap:18px;padding-top:12px;border-top:1px solid var(--line-2);}
.jf-stat{display:flex;flex-direction:column;gap:1px;}
.jf-stat b{font-size:17px;font-weight:800;}
.jf-stat span{font-size:11.5px;color:var(--ink-3);font-weight:600;}
.jf-fav{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);background:transparent;}
.jf-fav:hover{background:var(--warn-soft);color:var(--warn);}
.jf-fav.on{color:#e8a400;}
.jf-newpill{background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;}
.jf-empty{text-align:center;color:var(--ink-3);padding:60px 20px;}
.jf-empty .ic{display:flex;justify-content:center;margin-bottom:12px;color:#c2c7d8;}

/* simple row list (favorites / quick lists) */
.jf-rowlist{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;}
.jf-listrow{display:flex;align-items:center;gap:15px;padding:16px 20px;border-bottom:1px solid var(--line-2);transition:background .12s;}
.jf-listrow:last-child{border-bottom:none;}
.jf-listrow:hover{background:var(--surface-2);}
.jf-listrow .lr-main{flex:1;min-width:0;}
.jf-listrow .lr-title{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.jf-listrow .lr-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px;}
.jf-listrow .lr-chev{color:var(--ink-3);flex:none;display:flex;}

/* ============================================================
   Form workspace + tabs
   ============================================================ */
.jf-ws-head{padding:18px 36px 0;width:100%;}
.jf-ws-body{padding:24px 36px 80px;width:100%;}
.jf-ws-titlebar{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.jf-ws-title{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.2;}
.jf-ws-metaline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);margin-top:6px;}
.jf-ws-metaline .it{display:flex;align-items:center;gap:5px;}
.jf-ws-actions{margin-left:auto;display:flex;align-items:center;gap:9px;}
.jf-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line);margin-top:18px;padding:0 36px;width:100%;overflow-x:auto;}
.jf-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap;}
.jf-tab:hover{color:var(--brand);}
.jf-tab.active{color:var(--brand);border-bottom-color:var(--brand);}
.jf-tab .cnt{font-size:11.5px;font-weight:700;background:#eef0f6;color:var(--ink-3);padding:1px 7px;border-radius:999px;}

/* canvas (build + fill preview) */
.jf-canvas-wrap{padding:24px 36px 80px;width:100%;}
/* Workspace content width — comfortable, left-aligned with the header (36px). */
.jf-canvas{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:34px;max-width:880px;}
/* In the builder the canvas fills its column (palette sits beside it). */
.jf-builder-canvas .jf-canvas{max-width:none;}
/* Full-width builder canvas (spans the whole content area). */
.jf-canvas--full{max-width:none;}
.jf-logo-drop{width:96px;height:96px;border:2px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0 auto 18px;color:var(--ink-3);font-size:11.5px;font-weight:600;cursor:pointer;}
.jf-logo-drop:hover{border-color:var(--brand-2);color:var(--brand);}
.jf-form-title{font-size:26px;font-weight:800;text-align:center;letter-spacing:-.02em;}
.jf-form-byline{text-align:center;color:var(--ink-3);font-size:13px;margin-top:6px;}
.jf-fields-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin:24px 0 14px;}

/* builder field rows */
.jf-build-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;max-width:880px;}
.jf-builder-canvas .jf-build-bar{max-width:none;}
.jf-build-count{font-size:13px;color:var(--ink-3);font-weight:600;}
.jf-frow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;margin-bottom:10px;transition:.12s;}
.jf-frow:hover{border-color:#d3d8ea;box-shadow:var(--sh-1);}
.jf-frow.dragging{opacity:.5;}
.jf-frow.drop-target{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(58,111,216,.16);}
.jf-frow .grip{color:var(--ink-3);cursor:grab;display:flex;}
.jf-frow .ficon{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.jf-frow .fmain{flex:1;min-width:0;}
.jf-frow .flabel{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;}
.jf-frow .flabel .req{color:var(--danger);}
.jf-frow .fmeta{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.jf-frow .facts{display:flex;align-items:center;gap:4px;}
.jf-rowact{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);border:1px solid transparent;}
.jf-rowact:hover{background:var(--brand-soft);color:var(--brand);}
.jf-rowact.danger:hover{background:var(--danger-soft);color:var(--danger);}
.jf-section-row{border:none;background:transparent;padding:18px 0 6px;margin:0;}
.jf-section-row .stitle{font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;border-bottom:2px solid var(--line);padding-bottom:8px;}
.jf-divider-row{border:none;background:transparent;padding:6px 0;}
.jf-divider-row hr{border:0;border-top:1px dashed var(--line);}

/* ---- builder canvas (design: inline editors) ---- */
.jf-canvas-title-input{display:block;width:100%;border:none;background:transparent;text-align:center;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);padding:4px 0;}
.jf-canvas-title-input::placeholder{color:#c2c7d8;}
.jf-canvas-title-input:focus{outline:none;}
.jf-build-empty{text-align:center;color:var(--ink-3);padding:34px 20px;}
.jf-build-empty .ic{width:54px;height:54px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;}
.jf-build-empty .t{font-size:15.5px;font-weight:800;color:var(--ink);}
.jf-build-empty .d{font-size:13px;margin-top:4px;}
.jf-addfield{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border:1.5px dashed #c9cfe4;border-radius:14px;background:var(--surface-2);color:var(--brand);font-size:14.5px;font-weight:700;transition:.14s;}
.jf-addfield:hover{border-color:var(--brand-2);background:var(--brand-soft);}

/* logo dropzone (with preview) */
.jf-logo-drop{position:relative;overflow:hidden;}
.jf-logo-drop.has-logo{border-style:solid;border-color:var(--line);padding:0;background:#fff;}
.jf-logo-drop.has-logo img{width:100%;height:100%;object-fit:contain;padding:8px;}
.jf-logo-drop .logo-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;background:rgba(23,26,43,.6);color:#fff;display:flex;align-items:center;justify-content:center;}
.jf-logo-drop .logo-del:hover{background:var(--danger);}

/* inline field card */
.jf-bfield{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:12px;transition:border-color .12s,box-shadow .12s;}
.jf-bfield:hover{border-color:#d3d8ea;}
.jf-bfield.open{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(58,111,216,.12);}
.jf-bfield.dragging{opacity:.5;}
.jf-bfield.drop-target{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(58,111,216,.16);}
.jf-bfield-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;}
.jf-bfield-head .grip{color:var(--ink-3);cursor:grab;display:flex;flex:none;}
.jf-bfield-head .ic{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.jf-bfield-head .meta{flex:1;min-width:0;}
.jf-bfield-head .ttl{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;}
.jf-bfield-head .ttl .req{color:var(--danger);}
.jf-bfield-head .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.jf-bfield-head .acts{display:flex;align-items:center;gap:4px;flex:none;}
.jf-bfield-body{padding:4px 16px 18px;border-top:1px solid var(--line-2);}
.jf-bfield-body .label{margin-top:0;}
.jf-bfield-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:16px;}
.jf-togglewrap{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;}
.jf-widthwrap{display:flex;align-items:center;gap:10px;}
.jf-widthwrap .lbl{font-size:13.5px;font-weight:600;color:var(--ink-2);}
.jf-wseg a{display:inline-flex;align-items:center;gap:6px;}

/* options editor */
.jf-opt-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.jf-opt-row .opt-mark{width:18px;height:18px;border-radius:50%;border:2px solid #cdd2e6;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink-3);}
.jf-opt-row .opt-mark.sq{border-radius:5px;}
.jf-opt-row .opt-mark.num{border-radius:6px;}
.jf-opt-row .opt-del{width:30px;height:30px;border-radius:8px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;flex:none;}
.jf-opt-row .opt-del:hover{background:var(--danger-soft);color:var(--danger);}
.jf-addopt{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--brand);padding:7px 4px;}
.jf-addopt:hover{text-decoration:underline;}

/* choose-field-type modal */
.jf-ft-modal{width:680px;max-width:100%;}
.jf-ft-group{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin:16px 0 10px;}
.jf-ft-group:first-child{margin-top:0;}
.jf-ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:560px){.jf-ft-grid{grid-template-columns:1fr;}}
.jf-ft-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;text-align:left;background:#fff;transition:.12s;}
.jf-ft-item:hover{border-color:var(--brand-2);background:var(--brand-soft);}
.jf-ft-item .pic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.jf-ft-item .tx{display:flex;flex-direction:column;min-width:0;}
.jf-ft-item .pt{font-weight:700;font-size:14px;}
.jf-ft-item .pd{font-size:12px;color:var(--ink-3);}

.jf-deptchk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2);padding:8px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;}
.jf-deptchk:hover{border-color:#d3d8ea;}

/* field palette (add field) */
.jf-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.jf-palette-group-title{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin:14px 0 8px;}
.jf-palette-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;text-align:left;background:#fff;transition:.12s;}
.jf-palette-item:hover{border-color:var(--brand-2);background:var(--brand-soft);}
.jf-palette-item .pic{width:30px;height:30px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.jf-palette-item .pt{font-weight:700;font-size:13.5px;}
.jf-palette-item .pd{font-size:11.5px;color:var(--ink-3);}

/* ============================================================
   Fill form (rendered fields)
   ============================================================ */
.jf-fill .jf-field{margin-bottom:18px;}
.jf-fill .jf-field > .label{font-size:14px;color:var(--ink);font-weight:600;}
.jf-fill .jf-field .help{font-size:12.5px;color:var(--ink-3);margin-bottom:7px;white-space:pre-line;}
.jf-radio,.jf-check{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;}
.jf-radio:hover,.jf-check:hover{border-color:#d3d8ea;background:var(--surface-2);}
.jf-stars{display:flex;gap:6px;color:#d6d9e6;}
.jf-stars .s{cursor:pointer;}
.jf-stars .s.on{color:#e8a400;}
.jf-sigpad{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);width:100%;height:170px;touch-action:none;cursor:crosshair;}

/* ============================================================
   Templates library
   ============================================================ */
.jf-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.jf-tpl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px;display:flex;flex-direction:column;gap:10px;min-height:172px;transition:box-shadow .14s,transform .14s;}
.jf-tpl-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
.jf-tpl-blank{border:2px dashed var(--brand-2);background:var(--brand-soft);align-items:flex-start;justify-content:center;}
.jf-tpl-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.jf-tpl-title{font-weight:800;font-size:16px;}
.jf-tpl-desc{font-size:13px;color:var(--ink-2);line-height:1.45;flex:1;}
.jf-tpl-foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-3);font-weight:600;}

/* ============================================================
   Insights
   ============================================================ */
.jf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px;}
.jf-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px;}
.jf-kpi-top{display:flex;align-items:center;justify-content:space-between;}
.jf-kpi-ic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.jf-kpi-delta{font-size:12.5px;font-weight:700;color:var(--ok);}
.jf-kpi-val{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:14px;}
.jf-kpi-lbl{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:2px;}
.jf-ins-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:20px;}
@media(max-width:900px){.jf-ins-grid{grid-template-columns:1fr;}}
.jf-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px;}
.jf-panel-title{font-weight:800;font-size:17px;margin-bottom:16px;}
.jf-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.jf-bar-row .nm{font-size:13.5px;font-weight:600;flex:none;width:110px;}
.jf-bar-track{flex:1;height:8px;border-radius:999px;background:var(--line-2);overflow:hidden;display:block;}
.jf-bar-fill{display:block;height:100%;border-radius:999px;}
.jf-bar-row .vl{font-size:13.5px;font-weight:800;flex:none;width:28px;text-align:right;}
.jf-toprow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2);}
.jf-toprow:last-child{border-bottom:none;}
.jf-toprow .rk{font-size:14px;font-weight:800;color:var(--ink-3);width:18px;}
.jf-kpi-delta.down{color:var(--danger);}
.jf-kpi-delta.review{color:var(--warn);}

/* insights: chart period badge */
.jf-chart-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--ok-soft);color:var(--ok);}
.jf-chart-badge.down{background:var(--danger-soft);color:var(--danger);}

/* donut chart */
.jf-donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.jf-donut{position:relative;width:150px;height:150px;flex:none;}
.jf-donut .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.jf-donut .ctr b{font-size:26px;font-weight:800;letter-spacing:-.02em;}
.jf-donut .ctr span{font-size:11.5px;color:var(--ink-3);font-weight:600;}
.jf-donut-legend{flex:1;min-width:160px;display:flex;flex-direction:column;gap:13px;}
.jf-donut-legend .row{display:flex;align-items:center;gap:10px;font-size:13.5px;}
.jf-donut-legend .dot{width:11px;height:11px;border-radius:50%;flex:none;}
.jf-donut-legend .nm{flex:1;font-weight:600;color:var(--ink-2);}
.jf-donut-legend .vl{font-weight:800;}
.jf-donut-legend .pc{color:var(--ink-3);font-weight:600;width:38px;text-align:right;}

/* busiest days (vertical bars) */
.jf-days{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:18px;}
.jf-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.jf-day .bar{width:100%;max-width:46px;border-radius:8px 8px 4px 4px;background:var(--brand-soft);transition:.14s;min-height:4px;}
.jf-day.peak .bar{background:var(--brand);}
.jf-day .vv{font-size:12px;font-weight:800;color:var(--ink-2);}
.jf-day .dd{font-size:11.5px;color:var(--ink-3);font-weight:600;}

/* needs attention cards */
.jf-attn{display:flex;flex-direction:column;gap:10px;}
.jf-attn-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;width:100%;transition:.12s;}
.jf-attn-row:not([disabled]):hover{border-color:var(--brand-2);background:var(--brand-soft);}
.jf-attn-row[disabled]{opacity:.6;}
.jf-attn-row .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;}
.jf-attn-row .meta{flex:1;min-width:0;}
.jf-attn-row .t{display:block;font-weight:700;font-size:14px;}
.jf-attn-row .d{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.jf-attn-row .chev{color:var(--ink-3);flex:none;display:flex;}

/* submission avatars + filter bar */
.jf-savatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;flex:none;letter-spacing:-.01em;}
.jf-subfilter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.jf-subfilter .jf-seg{flex-wrap:wrap;}
.jf-subfilter .jf-seg a .cnt{font-size:11px;font-weight:700;margin-left:5px;opacity:.7;}
.jf-subfilter-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.jf-subsearch{position:relative;}
.jf-subsearch .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:flex;}
.jf-subsearch input{padding-left:34px;height:38px;width:220px;max-width:46vw;}
.jf-formselect{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 32px 0 12px;font-size:13.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-1);max-width:200px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8298' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;cursor:pointer;}
.jf-formselect:hover{border-color:#d3d8ea;}
.jf-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;line-height:1.2;}

/* table */
.jf-table{width:100%;border-collapse:collapse;}
.jf-table th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:11px 14px;border-bottom:1px solid var(--line);}
.jf-table td{padding:13px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;}
.jf-table tr:hover td{background:var(--surface-2);}

/* modal */
.jf-overlay{position:fixed;inset:0;z-index:200;background:rgba(23,26,43,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;}
.jf-modal{width:460px;max-width:100%;max-height:90vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:var(--sh-3);}
.jf-modal-head{padding:20px 22px;border-bottom:1px solid var(--line);}
.jf-modal-title{font-size:18px;font-weight:800;}
.jf-modal-body{padding:22px;}
.jf-modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}

/* toast */
.jf-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:400;}
.jf-toast .box{display:flex;align-items:center;gap:10px;background:#171a2b;color:#fff;padding:11px 18px;border-radius:12px;box-shadow:var(--sh-3);font-size:14px;font-weight:600;}

/* help fab */
.jf-fab{position:fixed;bottom:22px;right:22px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);color:var(--brand);display:flex;align-items:center;justify-content:center;z-index:50;}

/* accordion (native <details>) */
.jf-acc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:12px;overflow:hidden;}
.jf-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px;font-weight:700;font-size:15px;color:var(--ink);}
.jf-acc>summary::-webkit-details-marker{display:none;}
.jf-acc>summary:hover{background:var(--surface-2);}
.jf-acc>summary .jf-acc-ic{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.jf-acc>summary .chev{margin-left:auto;color:var(--ink-3);transition:transform .18s;flex:none;}
.jf-acc[open]>summary .chev{transform:rotate(180deg);}
.jf-acc[open]>summary{border-bottom:1px solid var(--line-2);}
.jf-acc-body{padding:18px 20px;color:var(--ink-2);font-size:14px;line-height:1.6;}
.jf-acc-body img,.jf-acc-body video{max-width:100%;border-radius:10px;border:1px solid var(--line);margin:6px 0 16px;display:block;}
.jf-acc-step{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;font-weight:600;color:var(--ink);}
.jf-acc-step .num{width:22px;height:22px;border-radius:6px;background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;flex:none;margin-top:1px;}

/* ============================================================
   Sign-in
   ============================================================ */
.jf-signin{min-height:100vh;display:flex;}
.jf-signin-brand{flex:1;background:var(--brand-grad);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:60px;position:relative;overflow:hidden;}
.jf-signin-brand h1{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 16px;}
.jf-signin-brand p{font-size:16px;opacity:.85;line-height:1.5;max-width:420px;}
.jf-signin-form{width:480px;max-width:100%;display:flex;align-items:center;justify-content:center;padding:40px;}
.jf-signin-card{width:360px;max-width:100%;}
@media(max-width:860px){.jf-signin-brand{display:none;}.jf-signin-form{flex:1;}}

@media(max-width:680px){
  .jf-page,.jf-canvas-wrap,.jf-ws-head,.jf-tabs{padding-left:16px;padding-right:16px;}
  .jf-ins-grid{grid-template-columns:1fr;}
}