*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f6f8;color:#222}.app{display:flex;min-height:100vh}.sidebar{width:260px;background:#2b2e33;color:#fff;padding:18px;position:fixed;inset:0 auto 0 0;overflow:auto}.brand{display:flex;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid #444}.brand img{width:62px;height:62px;object-fit:contain;border-radius:8px;background:#d71920}.brand small{display:block;color:#bbb;margin-top:3px}.sidebar nav{display:grid;gap:6px;margin-top:18px}.sidebar a{color:#eee;text-decoration:none;padding:11px 12px;border-radius:8px}.sidebar a:hover{background:#d71920}.main{margin-left:260px;min-height:100vh;width:calc(100% - 260px)}.topbar{background:#d71920;color:white;padding:18px 26px;display:flex;justify-content:space-between}.topbar h1{margin:0;font-size:22px}.content{padding:24px;max-width:1400px}.card{background:#fff;border:1px solid #e4e6ea;border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.04)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.stat b{font-size:30px;color:#d71920}.btn,button{display:inline-block;background:#d71920;color:#fff;border:0;border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer}.btn.gray{background:#555}.btn.green{background:#198754}.btn.small{padding:7px 10px;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}label{display:block;font-weight:650;margin:8px 0 5px}input,select,textarea{width:100%;padding:10px;border:1px solid #cfd3da;border-radius:8px;background:#fff}textarea{min-height:95px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid #eceef1;text-align:left;vertical-align:top}th{background:#f0f1f3}.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px}.success{background:#dff3e5;color:#155d2a}.error{background:#fde2e2;color:#8b1a1a}.muted{color:#6b7280}.auth-page{min-height:100vh;display:grid;place-items:center;background:#efefef;padding:20px}.login{width:min(440px,100%);text-align:center}.login img{width:170px;background:#d71920;border-radius:12px;padding:8px}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eee;font-size:12px}.builder{position:relative;height:650px;background:#f8f9fb;border:1px dashed #bbb;border-radius:12px;overflow:auto}.node{position:absolute;width:220px;background:white;border:2px solid #444;border-radius:10px;padding:12px;cursor:move;box-shadow:0 3px 10px rgba(0,0,0,.08);z-index:2}.node.decision{border-color:#d71920}.node.start,.node.end{border-radius:40px}.node img{max-width:100%;max-height:110px;object-fit:contain}.node .type{font-size:11px;text-transform:uppercase;color:#777}.connections{position:absolute;inset:0;pointer-events:none;z-index:1}.runner-card{max-width:760px;margin:0 auto}.runner-card img{max-width:100%;border-radius:10px;margin:10px 0}.option{display:block;width:100%;margin:8px 0;text-align:left}.mobile-toggle{display:none}@media(max-width:800px){.sidebar{position:static;width:100%}.app{display:block}.main{margin:0;width:100%}.row{grid-template-columns:1fr}.content{padding:14px}.builder{height:540px}.node{width:190px}.brand img{width:50px;height:50px}}.flow-modal{position:fixed;inset:4% 6%;z-index:20;overflow:auto;max-height:92vh}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.media-box{border:1px solid #e0e3e8;border-radius:10px;padding:12px;background:#fafafa}.media-box button{margin-top:8px}.media-preview{margin-top:10px}.media-preview img,.media-preview video{width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#111}.danger{background:#9b1c1c}.media-tag{display:inline-block;margin:4px 5px 0 0;padding:3px 7px;border-radius:999px;background:#f1f1f1;font-size:11px}.runner-video{width:100%;max-height:460px;border-radius:10px;background:#111;margin:10px 0}.runner-description{line-height:1.6}@media(max-width:900px){.media-grid{grid-template-columns:1fr}.flow-modal{inset:2% 3%}}


/* =========================================================
   TTM TKS V2.7 — MOBILE/TABLET FLOW DRAG
   UI and interaction only. Existing flow data is unchanged.
   ========================================================= */

.flow-toolbar-card{
  position:relative;
  z-index:5;
}

.flow-toolbar-main{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.flow-node-actions{
  flex:1 1 600px;
}

.flow-mobile-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.flow-mode-btn.active{
  background:#151922;
  color:#fff;
  box-shadow:0 8px 18px rgba(21,25,34,.20);
}

.flow-help-text{
  margin:14px 0 0;
  line-height:1.5;
}

.builder{
  position:relative;
  min-width:100%;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-x pan-y;
}

.builder .node{
  padding:0;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:auto;
  transition:
    box-shadow .16s ease,
    transform .16s ease,
    border-color .16s ease;
}

.builder .node.is-dragging{
  z-index:100;
  transform:scale(1.015);
  box-shadow:0 18px 38px rgba(15,23,42,.28);
  opacity:.98;
}

.node-drag-handle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 10px;
  border-bottom:1px solid #e6e8ec;
  background:linear-gradient(180deg,#f8f9fb,#eef1f4);
  color:#4d5561;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.035em;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.node-drag-handle:active{
  cursor:grabbing;
}

.node-drag-icon{
  color:#d71920;
  font-size:1rem;
}

.node-content{
  padding:12px;
}

.flow-mode-edit .node{
  cursor:pointer;
}

.flow-mode-edit .node-drag-handle{
  opacity:.45;
  pointer-events:none;
}

.flow-mode-move .node-content{
  pointer-events:none;
}

.flow-mode-move .node-drag-handle{
  pointer-events:auto;
}

body.flow-dragging{
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

body.flow-dragging *{
  -webkit-touch-callout:none !important;
}

@media(max-width:900px){
  .flow-toolbar-card{
    position:sticky;
    top:0;
    z-index:12;
    border-radius:0 0 14px 14px;
  }

  .flow-node-actions{
    display:flex;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }

  .flow-node-actions button{
    flex:0 0 auto;
    min-height:44px;
  }

  .flow-mobile-controls{
    position:sticky;
    left:0;
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .flow-mobile-controls button{
    min-height:46px;
    padding:9px 8px;
    white-space:nowrap;
  }

  .flow-help-text{
    font-size:.84rem;
  }

  .builder{
    height:68vh;
    min-height:560px;
  }

  .builder .node{
    width:220px;
  }

  .node-drag-handle{
    min-height:46px;
    font-size:.82rem;
  }
}

@media(max-width:520px){
  .flow-mobile-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .builder{
    height:70vh;
    min-height:520px;
  }

  .builder .node{
    width:210px;
  }
}


/* =========================================================
   TTM TKS V2.8 — MOBILE NODE FOCUS & DUPLICATE
   ========================================================= */

.builder,
.builder *{
  -webkit-touch-callout:none !important;
}

.flow-mode-move,
.flow-mode-move .node,
.flow-mode-move .node *{
  user-select:none !important;
  -webkit-user-select:none !important;
}

.flow-mode-move .node{
  -webkit-tap-highlight-color:transparent;
}

.builder .node.is-selected{
  border-color:#e01620 !important;
  box-shadow:
    0 0 0 4px rgba(224,22,32,.18),
    0 14px 34px rgba(139,15,23,.24) !important;
}

.builder .node.is-selected .node-drag-handle{
  border-bottom-color:#e01620;
  background:linear-gradient(135deg,#a90f16,#df1e27);
  color:#fff;
}

.builder .node.is-selected .node-drag-icon{
  color:#fff;
}

.builder .node.is-selected::after{
  content:"SELECTED";
  position:absolute;
  right:9px;
  top:10px;
  z-index:4;
  padding:3px 6px;
  border-radius:999px;
  background:#fff;
  color:#b4121a;
  font-size:.57rem;
  font-weight:900;
  letter-spacing:.08em;
  pointer-events:none;
}

.node-editor-actions{
  position:sticky;
  bottom:0;
  z-index:4;
  padding-top:12px;
  padding-bottom:4px;
  background:linear-gradient(to top,#fff 75%,rgba(255,255,255,0));
}

.node-editor-actions button{
  min-width:100px;
}

@media(max-width:700px){
  .builder .node.is-selected{
    box-shadow:
      0 0 0 5px rgba(224,22,32,.20),
      0 16px 36px rgba(139,15,23,.28) !important;
  }

  .node-editor-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .node-editor-actions button{
    min-width:0;
    min-height:46px;
    padding:9px 7px;
  }
}


/* =========================================================
   TTM TKS V2.9 — DELETE + UNDO / REDO
   ========================================================= */

.flow-mobile-controls button:disabled,
.node-editor-actions button:disabled{
  opacity:.42;
  cursor:not-allowed;
  filter:grayscale(.35);
  box-shadow:none !important;
  transform:none !important;
}

.flow-mobile-controls .danger{
  background:#a31319;
}

.flow-mobile-controls .danger:not(:disabled):hover{
  background:#cf1720;
}

.node-editor-actions .danger{
  background:#a31319;
}

.node-editor-actions .danger:hover{
  background:#cf1720;
}

@media(max-width:900px){
  .flow-mobile-controls{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .flow-mobile-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .node-editor-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   TTM TKS V3.0 — RESPONSIVE NAVIGATION
   Desktop: full sidebar
   Tablet: compact icon rail
   Phone: bottom navigation
   ========================================================= */

.tks-mobile-bottom-nav{
  display:none;
}

/* Tablet layout */
@media (min-width:700px) and (max-width:1099px){
  .tks-sidebar{
    width:92px;
    overflow-x:hidden;
  }

  .tks-brand{
    min-height:84px;
    justify-content:center;
    padding:14px 8px;
  }

  .tks-brand img{
    width:52px;
    height:42px;
  }

  .tks-brand-copy,
  .tks-version,
  .tks-nav-label,
  .tks-sidebar-footer{
    display:none;
  }

  .tks-nav{
    grid-template-columns:1fr;
    padding:12px 9px 22px;
    gap:7px;
  }

  .tks-sidebar .tks-nav a{
    min-height:62px;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    padding:8px 5px;
    border-radius:13px;
    text-align:center;
    font-size:.62rem;
    line-height:1.1;
  }

  .tks-sidebar .tks-nav a.active::before{
    left:-9px;
  }

  .tks-nav-icon{
    width:24px;
    height:24px;
    flex-basis:24px;
  }

  .tks-nav-icon svg{
    width:23px;
    height:23px;
  }

  .tks-main{
    margin-left:92px;
    width:calc(100% - 92px);
  }

  .tks-topbar{
    min-height:86px;
    padding:15px 20px;
  }

  .tks-topbar h1{
    font-size:1.08rem;
    max-width:520px;
  }

  .tks-content{
    padding:20px;
  }

  .flow-toolbar-main{
    gap:10px;
  }

  .flow-node-actions{
    flex-basis:100%;
  }

  .flow-mobile-controls{
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Phone layout */
@media (max-width:699px){
  body{
    padding-bottom:84px;
  }

  .tks-sidebar{
    display:none !important;
  }

  .tks-main{
    margin-left:0 !important;
    width:100% !important;
  }

  .tks-topbar{
    position:sticky;
    top:0;
    z-index:40;
    min-height:82px;
    padding:14px 16px;
  }

  .tks-topbar-left{
    min-width:0;
  }

  .tks-topbar h1{
    max-width:calc(100vw - 96px);
    font-size:1.02rem;
    line-height:1.22;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .tks-topbar small{
    font-size:.72rem;
  }

  .tks-mobile-menu,
  .tks-system-status,
  .tks-user-copy{
    display:none !important;
  }

  .tks-user-card{
    padding-left:10px;
    min-width:auto;
  }

  .tks-avatar{
    width:42px;
    height:42px;
  }

  .tks-content{
    padding:14px 12px 104px;
  }

  .tks-mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:76px;
    padding:
      8px max(8px,env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left));
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(17,27,49,.97);
    box-shadow:0 -10px 30px rgba(7,14,26,.28);
    backdrop-filter:blur(16px);
  }

  .tks-mobile-bottom-nav a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    min-width:0;
    min-height:58px;
    padding:6px 4px;
    border-radius:15px;
    color:#d9e2ef;
    text-decoration:none;
    font-size:.61rem;
    font-weight:750;
    line-height:1.05;
    text-align:center;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }

  .tks-mobile-bottom-nav a.active{
    color:#fff;
    background:linear-gradient(145deg,#1688ff,#2563eb);
    box-shadow:
      0 8px 20px rgba(37,99,235,.35),
      inset 0 1px 0 rgba(255,255,255,.22);
    transform:translateY(-5px);
  }

  .tks-mobile-nav-icon{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
  }

  .tks-mobile-nav-icon svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .tks-mobile-nav-label{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .flow-toolbar-card{
    top:82px;
    margin-left:0;
    margin-right:0;
    border-radius:14px;
  }

  .flow-toolbar-main{
    display:block;
  }

  .flow-node-actions{
    display:flex;
    overflow-x:auto;
    flex-wrap:nowrap;
    gap:8px;
    padding:0 0 8px;
    scroll-snap-type:x proximity;
  }

  .flow-node-actions button{
    scroll-snap-align:start;
    min-height:44px;
  }

  .flow-mobile-controls{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .flow-mobile-controls button{
    min-height:46px;
    font-size:.78rem;
  }

  .flow-help-text{
    margin-top:12px;
    font-size:.78rem;
    line-height:1.45;
  }

  .builder{
    height:calc(100vh - 300px);
    min-height:470px;
    margin-bottom:12px;
  }

  .builder .node{
    width:205px;
  }
}

@media (max-width:420px){
  .tks-mobile-bottom-nav{
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding-left:4px;
    padding-right:4px;
  }

  .tks-mobile-bottom-nav a{
    padding-left:2px;
    padding-right:2px;
    font-size:.56rem;
  }

  .flow-mobile-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   TTM TKS V3.1 — PHONE BLACK BOTTOM NAVIGATION
   Phone-only visual refinement.
   ========================================================= */

@media (max-width:699px){
  .tks-mobile-bottom-nav{
    background:#0d1118 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 -10px 28px rgba(0,0,0,.36) !important;
  }

  .tks-mobile-bottom-nav a{
    color:#cfd6df !important;
    background:transparent !important;
    border:1px solid transparent;
    border-radius:12px !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .tks-mobile-bottom-nav a:hover,
  .tks-mobile-bottom-nav a:focus{
    color:#fff !important;
    background:rgba(255,255,255,.055) !important;
  }

  .tks-mobile-bottom-nav a.active{
    color:#fff !important;
    background:linear-gradient(145deg,#a90f16,#d71920) !important;
    border-color:rgba(255,255,255,.10);
    box-shadow:
      0 8px 18px rgba(215,25,32,.28),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
    transform:translateY(-3px) !important;
  }

  .tks-mobile-bottom-nav a.active .tks-mobile-nav-icon{
    color:#fff !important;
  }

  .tks-mobile-nav-icon{
    color:#d8dee7;
  }

  .tks-mobile-nav-label{
    color:inherit;
  }

  /* More room while dragging nodes on phone */
  body.flow-dragging .tks-mobile-bottom-nav{
    opacity:0;
    transform:translateY(110%);
    pointer-events:none;
  }

  .tks-mobile-bottom-nav{
    transition:
      opacity .18s ease,
      transform .18s ease,
      background .18s ease;
  }
}


/* =========================================================
   TTM TKS V3.2 — PHONE FULL SCROLLABLE BOTTOM MENU
   ========================================================= */

@media (max-width:699px){
  .tks-mobile-bottom-shell{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    background:#0d1118;
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -10px 28px rgba(0,0,0,.36);
  }

  .tks-mobile-bottom-nav{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:flex !important;
    grid-template-columns:none !important;
    width:100%;
    min-height:78px;
    overflow-x:auto;
    overflow-y:hidden;
    gap:6px;
    padding:
      8px max(10px,env(safe-area-inset-right))
      9px
      max(10px,env(safe-area-inset-left));
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    background:#0d1118 !important;
    border-top:0 !important;
    box-shadow:none !important;
    scrollbar-width:none;
  }

  .tks-mobile-bottom-nav::-webkit-scrollbar{
    display:none;
  }

  .tks-mobile-bottom-nav a{
    flex:0 0 88px;
    width:88px;
    min-width:88px;
    min-height:60px;
    scroll-snap-align:center;
    padding:7px 5px;
  }

  .tks-mobile-bottom-nav a.active{
    transform:translateY(-2px) !important;
  }

  .tks-mobile-nav-label{
    width:100%;
    font-size:.58rem;
    line-height:1.05;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .tks-mobile-scroll-hint{
    height:17px;
    padding-bottom:calc(2px + env(safe-area-inset-bottom));
    text-align:center;
    color:#7f8997;
    background:#0d1118;
    font-size:.55rem;
    font-weight:700;
    letter-spacing:.08em;
    line-height:15px;
    user-select:none;
    pointer-events:none;
  }

  body{
    padding-bottom:98px;
  }

  .tks-content{
    padding-bottom:122px;
  }

  body.flow-dragging .tks-mobile-bottom-shell{
    opacity:0;
    transform:translateY(110%);
    pointer-events:none;
  }

  .tks-mobile-bottom-shell{
    transition:opacity .18s ease,transform .18s ease;
  }
}

@media (max-width:390px){
  .tks-mobile-bottom-nav a{
    flex-basis:82px;
    width:82px;
    min-width:82px;
  }
}


/* =========================================================
   TTM TKS V3.3 — PHONE NODE EDITOR SPACING & BUTTON VISIBILITY
   ========================================================= */

@media (max-width:699px){

  /* Add breathing room between branch fields and + Pilihan */
  .flow-modal #optionRows{
    margin-bottom:18px;
  }

  .flow-modal .option-row{
    margin-bottom:14px;
  }

  .flow-modal #optionRows + button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    margin-top:8px;
    margin-bottom:28px;
    padding:11px 18px;
  }

  /* Keep all node editor action buttons above the phone bottom menu */
  .flow-modal{
    padding-bottom:155px !important;
    scroll-padding-bottom:155px;
  }

  .node-editor-actions{
    position:sticky;
    bottom:98px !important;
    z-index:50;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:22px !important;
    padding:14px 0 12px !important;
    background:
      linear-gradient(
        to top,
        #ffffff 0%,
        #ffffff 82%,
        rgba(255,255,255,.94) 92%,
        rgba(255,255,255,0) 100%
      ) !important;
  }

  .node-editor-actions button{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    margin:0 !important;
    padding:11px 8px !important;
    font-size:.88rem !important;
    white-space:normal;
  }

  .node-editor-actions .danger{
    background:#9e1118 !important;
  }

  /* Avoid menu covering the lower part of modal on short phones */
  .flow-modal .card:last-child,
  .flow-modal form:last-child{
    margin-bottom:115px;
  }
}

@media (max-width:390px){
  .node-editor-actions{
    bottom:96px !important;
    gap:8px !important;
  }

  .node-editor-actions button{
    min-height:50px !important;
    font-size:.82rem !important;
  }

  .flow-modal #optionRows + button{
    margin-bottom:24px;
  }
}


/* =========================================================
   TTM TKS V3.4 — PHONE COLLAPSIBLE NODE ACTIONS
   ========================================================= */

.node-action-panel{
  position:relative;
}

.node-action-toggle{
  display:none;
}

@media (max-width:699px){
  .node-action-panel{
    position:sticky;
    bottom:98px;
    z-index:55;
    margin-top:22px;
    padding-top:8px;
    background:
      linear-gradient(
        to top,
        #ffffff 0%,
        #ffffff 84%,
        rgba(255,255,255,.94) 92%,
        rgba(255,255,255,0) 100%
      );
  }

  .node-action-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:44px;
    margin:0 0 8px;
    padding:9px 12px;
    border-radius:11px;
    background:#151a23;
    color:#fff;
    font-size:.82rem;
    font-weight:850;
    box-shadow:0 8px 20px rgba(16,22,31,.16);
  }

  .node-editor-actions{
    position:static !important;
    bottom:auto !important;
    margin-top:0 !important;
    padding:0 0 10px !important;
    max-height:230px;
    overflow:hidden;
    opacity:1;
    transform:translateY(0);
    transition:
      max-height .22s ease,
      opacity .18s ease,
      transform .22s ease,
      padding .22s ease;
  }

  .node-action-panel:not(.is-open) .node-editor-actions{
    max-height:0;
    opacity:0;
    transform:translateY(8px);
    padding-top:0 !important;
    padding-bottom:0 !important;
    pointer-events:none;
  }

  .flow-modal{
    padding-bottom:145px !important;
  }
}


/* =========================================================
   TTM TKS V3.5 — PHONE ACTION PANEL POSITION FIX
   Places Show/Hide Actions just above the bottom menu.
   ========================================================= */

@media (max-width:699px){
  .node-action-panel{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:112px !important;
    z-index:1100 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    pointer-events:none;
  }

  .node-action-toggle{
    pointer-events:auto;
    margin:0 !important;
    min-height:48px !important;
    border-radius:13px !important;
    box-shadow:0 10px 26px rgba(0,0,0,.24) !important;
  }

  .node-editor-actions{
    pointer-events:auto;
    margin:0 0 10px !important;
    padding:10px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 14px 32px rgba(0,0,0,.22) !important;
    transform-origin:bottom center;
  }

  .node-action-panel.is-open .node-editor-actions{
    animation:tksActionSlideUp .18s ease both;
  }

  .node-action-panel:not(.is-open) .node-editor-actions{
    margin-bottom:0 !important;
  }

  .flow-modal{
    padding-bottom:180px !important;
  }

  body.flow-dragging .node-action-panel{
    opacity:0;
    transform:translateY(24px);
    pointer-events:none;
  }
}

@keyframes tksActionSlideUp{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:390px){
  .node-action-panel{
    left:10px !important;
    right:10px !important;
    bottom:108px !important;
  }
}


/* =========================================================
   TTM TKS V3.6 — TABLET & DESKTOP NAVIGATION / HEADER FIX
   Phone layout remains unchanged.
   ========================================================= */

/* Desktop */
@media (min-width:1100px){
  .tks-sidebar{
    width:260px !important;
    position:fixed !important;
    inset:0 auto 0 0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .tks-main{
    margin-left:260px !important;
    width:calc(100% - 260px) !important;
  }

  .tks-brand{
    min-height:86px !important;
    padding:14px 16px !important;
  }

  .tks-brand img{
    width:54px !important;
    height:42px !important;
  }

  .tks-brand-copy{
    display:block !important;
  }

  .tks-brand-copy b{
    font-size:.86rem !important;
    line-height:1.2 !important;
  }

  .tks-brand-copy small{
    display:block !important;
    font-size:.72rem !important;
  }

  .tks-version{
    display:inline-block !important;
  }

  .tks-nav-label{
    display:block !important;
  }

  .tks-nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:0 12px 20px !important;
  }

  .tks-sidebar .tks-nav a{
    min-height:42px !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    gap:11px !important;
    padding:10px 12px !important;
    font-size:.86rem !important;
    line-height:1.15 !important;
    text-align:left !important;
  }

  .tks-sidebar-footer{
    display:flex !important;
  }

  .tks-topbar{
    min-height:84px !important;
    padding:14px 24px !important;
  }

  .tks-topbar h1{
    font-size:1.28rem !important;
    line-height:1.18 !important;
  }

  .tks-system-status,
  .tks-user-copy{
    display:block !important;
  }

  .tks-mobile-bottom-shell{
    display:none !important;
  }
}

/* Tablet */
@media (min-width:700px) and (max-width:1099px){
  .tks-sidebar{
    width:220px !important;
    position:fixed !important;
    inset:0 auto 0 0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .tks-main{
    margin-left:220px !important;
    width:calc(100% - 220px) !important;
  }

  .tks-brand{
    min-height:82px !important;
    padding:13px 14px !important;
    justify-content:flex-start !important;
  }

  .tks-brand img{
    width:50px !important;
    height:40px !important;
  }

  .tks-brand-copy{
    display:block !important;
  }

  .tks-brand-copy b{
    font-size:.78rem !important;
    line-height:1.2 !important;
  }

  .tks-brand-copy small{
    display:block !important;
    font-size:.68rem !important;
  }

  .tks-version{
    display:inline-block !important;
    font-size:.60rem !important;
  }

  .tks-nav-label{
    display:block !important;
    padding:14px 16px 6px !important;
  }

  .tks-nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:0 10px 18px !important;
  }

  .tks-sidebar .tks-nav a{
    min-height:42px !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:9px 10px !important;
    border-radius:9px !important;
    text-align:left !important;
    font-size:.78rem !important;
    line-height:1.15 !important;
  }

  .tks-sidebar .tks-nav a span:last-child{
    display:block !important;
  }

  .tks-nav-icon{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
  }

  .tks-nav-icon svg{
    width:19px !important;
    height:19px !important;
  }

  .tks-sidebar-footer{
    display:flex !important;
    padding:12px 14px !important;
  }

  .tks-topbar{
    min-height:82px !important;
    padding:14px 18px !important;
  }

  .tks-topbar h1{
    max-width:520px !important;
    font-size:1.08rem !important;
    line-height:1.18 !important;
  }

  .tks-system-status{
    display:flex !important;
    font-size:.66rem !important;
  }

  .tks-user-copy{
    display:block !important;
  }

  .tks-mobile-bottom-shell{
    display:none !important;
  }

  .tks-content{
    padding:18px !important;
  }
}

/* Keep phone exactly as the approved version */
@media (max-width:699px){
  .tks-sidebar{
    display:none !important;
  }

  .tks-main{
    margin-left:0 !important;
    width:100% !important;
  }

  .tks-topbar{
    min-height:82px !important;
    padding:14px 16px !important;
  }

  .tks-topbar h1{
    max-width:calc(100vw - 96px) !important;
    font-size:1.02rem !important;
    line-height:1.22 !important;
  }

  .tks-mobile-bottom-shell{
    display:block !important;
  }
}


/* =========================================================
   TTM TKS V3.7 — TABLET & DESKTOP MENU HARD RESET
   Fixes oversized icons and vertical menu cards.
   Phone layout below 700px is not changed.
   ========================================================= */

@media (min-width:700px){

  /* Hide phone-only navigation completely */
  .tks-mobile-bottom-shell,
  .tks-mobile-bottom-nav,
  .tks-mobile-scroll-hint{
    display:none !important;
  }

  /* Sidebar base */
  aside.tks-sidebar{
    display:flex !important;
    flex-direction:column !important;
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 !important;
  }

  /* Brand */
  aside.tks-sidebar .tks-brand{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:11px !important;
    flex:0 0 auto !important;
  }

  aside.tks-sidebar .tks-brand img{
    display:block !important;
    flex:0 0 auto !important;
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 !important;
    margin:0 !important;
    object-fit:contain !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  aside.tks-sidebar .tks-brand-copy{
    display:block !important;
    min-width:0 !important;
    text-align:left !important;
  }

  aside.tks-sidebar .tks-version{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  aside.tks-sidebar .tks-nav-label{
    display:block !important;
    flex:0 0 auto !important;
  }

  /* Navigation layout */
  aside.tks-sidebar nav.tks-nav{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    grid-template-columns:none !important;
    gap:4px !important;
    width:100% !important;
    margin:0 !important;
  }

  aside.tks-sidebar nav.tks-nav > a{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:11px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:43px !important;
    height:auto !important;
    padding:10px 12px !important;
    margin:0 !important;
    border-radius:9px !important;
    text-align:left !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  aside.tks-sidebar nav.tks-nav > a > span:last-child{
    display:block !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    font-size:inherit !important;
    line-height:1.2 !important;
  }

  /* Force all sidebar icons to normal size */
  aside.tks-sidebar .tks-nav-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 20px !important;
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  aside.tks-sidebar .tks-nav-icon svg,
  aside.tks-sidebar nav.tks-nav svg{
    display:block !important;
    flex:0 0 19px !important;
    width:19px !important;
    min-width:19px !important;
    max-width:19px !important;
    height:19px !important;
    min-height:19px !important;
    max-height:19px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  aside.tks-sidebar .tks-nav-divider{
    flex:0 0 1px !important;
    width:auto !important;
    height:1px !important;
    margin:8px 6px !important;
  }

  aside.tks-sidebar .tks-sidebar-footer{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    margin-top:auto !important;
    flex:0 0 auto !important;
  }

  aside.tks-sidebar .tks-sidebar-footer img{
    width:46px !important;
    height:30px !important;
    min-width:46px !important;
    max-width:46px !important;
    object-fit:contain !important;
  }

  /* Header */
  header.tks-topbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .tks-topbar-left,
  .tks-topbar-right,
  .tks-user-card{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
  }

  .tks-topbar-right{
    gap:14px !important;
  }

  .tks-user-copy{
    display:block !important;
  }

  .tks-system-status{
    display:flex !important;
  }
}

/* Tablet */
@media (min-width:700px) and (max-width:1099px){
  aside.tks-sidebar{
    width:230px !important;
  }

  .tks-main{
    margin-left:230px !important;
    width:calc(100% - 230px) !important;
  }

  aside.tks-sidebar .tks-brand{
    min-height:82px !important;
    padding:13px 14px !important;
  }

  aside.tks-sidebar .tks-brand-copy b{
    font-size:.78rem !important;
  }

  aside.tks-sidebar .tks-brand-copy small{
    font-size:.67rem !important;
  }

  aside.tks-sidebar .tks-nav-label{
    padding:14px 16px 7px !important;
  }

  aside.tks-sidebar nav.tks-nav{
    padding:0 10px 18px !important;
  }

  aside.tks-sidebar nav.tks-nav > a{
    font-size:.78rem !important;
  }

  header.tks-topbar{
    min-height:82px !important;
    padding:14px 18px !important;
  }
}

/* Desktop */
@media (min-width:1100px){
  aside.tks-sidebar{
    width:260px !important;
  }

  .tks-main{
    margin-left:260px !important;
    width:calc(100% - 260px) !important;
  }

  aside.tks-sidebar .tks-brand{
    min-height:86px !important;
    padding:14px 16px !important;
  }

  aside.tks-sidebar .tks-nav-label{
    padding:16px 18px 7px !important;
  }

  aside.tks-sidebar nav.tks-nav{
    padding:0 12px 20px !important;
  }

  aside.tks-sidebar nav.tks-nav > a{
    font-size:.86rem !important;
  }

  header.tks-topbar{
    min-height:84px !important;
    padding:14px 24px !important;
  }
}


/* =========================================================
   TTM TKS V3.8 — SIDEBAR ICONS + TOP HEADER REFINEMENT
   Tablet and desktop only. Phone layout remains unchanged.
   ========================================================= */

@media (min-width:700px){

  :root{
    --tks-icon:#cbd5e1;
    --tks-icon-hover:#ffffff;
    --tks-sidebar-text:#e8edf4;
    --tks-sidebar-muted:#98a3b3;
  }

  /* Sidebar text and icon visibility */
  aside.tks-sidebar nav.tks-nav > a{
    color:var(--tks-sidebar-text) !important;
  }

  aside.tks-sidebar nav.tks-nav > a .tks-nav-icon{
    color:var(--tks-icon) !important;
    opacity:1 !important;
  }

  aside.tks-sidebar nav.tks-nav > a .tks-nav-icon svg{
    stroke:currentColor !important;
    fill:none !important;
    stroke-width:1.9 !important;
    opacity:1 !important;
    filter:none !important;
  }

  aside.tks-sidebar nav.tks-nav > a:hover{
    color:#fff !important;
    background:rgba(255,255,255,.075) !important;
  }

  aside.tks-sidebar nav.tks-nav > a:hover .tks-nav-icon{
    color:var(--tks-icon-hover) !important;
  }

  aside.tks-sidebar nav.tks-nav > a.active{
    color:#fff !important;
    background:
      linear-gradient(135deg,#a80f16 0%,#d71920 58%,#ed3038 100%) !important;
    box-shadow:
      0 10px 24px rgba(215,25,32,.26),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  aside.tks-sidebar nav.tks-nav > a.active .tks-nav-icon{
    color:#fff !important;
  }

  aside.tks-sidebar nav.tks-nav > a.active .tks-nav-icon svg{
    stroke-width:2.05 !important;
  }

  aside.tks-sidebar nav.tks-nav > a.tks-logout{
    color:#ffb3b8 !important;
  }

  aside.tks-sidebar nav.tks-nav > a.tks-logout .tks-nav-icon{
    color:#ff8d95 !important;
  }

  aside.tks-sidebar .tks-nav-label{
    color:#a8b1bf !important;
    font-weight:850 !important;
    letter-spacing:.11em !important;
  }

  /* Brand area */
  aside.tks-sidebar .tks-brand{
    background:
      linear-gradient(135deg,rgba(215,25,32,.18),rgba(215,25,32,.03) 58%,transparent 100%) !important;
    border-bottom-color:rgba(255,255,255,.10) !important;
  }

  aside.tks-sidebar .tks-brand-copy b{
    color:#fff !important;
    font-weight:800 !important;
  }

  aside.tks-sidebar .tks-brand-copy small{
    color:#aeb7c4 !important;
  }

  aside.tks-sidebar .tks-version{
    color:#f5f7fa !important;
    background:rgba(255,255,255,.06) !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  /* Premium top header */
  header.tks-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:40 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 18% 25%,rgba(255,255,255,.16),transparent 26%),
      linear-gradient(115deg,#9d0d14 0%,#c9151d 42%,#e11d27 68%,#9b0c13 100%) !important;
    border-bottom:1px solid rgba(121,8,14,.42) !important;
    box-shadow:
      0 8px 24px rgba(116,8,14,.18),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  header.tks-topbar::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.18;
    background-image:
      linear-gradient(rgba(255,255,255,.20) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(90deg,#000,transparent 78%);
  }

  header.tks-topbar::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,#ff4b53,#ffb0b4 35%,transparent 78%) !important;
    opacity:.75;
  }

  .tks-topbar-left,
  .tks-topbar-right{
    position:relative !important;
    z-index:2 !important;
  }

  .tks-topbar h1{
    color:#fff !important;
    font-weight:850 !important;
    letter-spacing:-.025em !important;
    text-shadow:0 1px 2px rgba(80,0,4,.22);
  }

  .tks-topbar small{
    color:rgba(255,255,255,.82) !important;
  }

  .tks-mobile-menu{
    display:none !important;
  }

  .tks-system-status{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 11px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;
    background:rgba(17,24,39,.16) !important;
    color:#fff !important;
    font-weight:750 !important;
    backdrop-filter:blur(8px);
  }

  .tks-system-status span{
    width:8px !important;
    height:8px !important;
    background:#43e08f !important;
    box-shadow:
      0 0 0 4px rgba(67,224,143,.12),
      0 0 13px rgba(67,224,143,.7) !important;
  }

  .tks-user-card{
    padding:7px 10px 7px 14px !important;
    border-left:1px solid rgba(255,255,255,.18) !important;
    border-radius:12px !important;
    background:rgba(17,24,39,.10) !important;
  }

  .tks-avatar{
    border-color:rgba(255,255,255,.72) !important;
    background:rgba(11,15,22,.24) !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  .tks-user-copy b{
    color:#fff !important;
    font-weight:800 !important;
  }

  .tks-user-copy small{
    color:rgba(255,255,255,.72) !important;
  }
}

/* Tablet-specific compact tuning */
@media (min-width:700px) and (max-width:1099px){
  header.tks-topbar{
    min-height:78px !important;
  }

  .tks-system-status{
    padding:7px 9px !important;
    font-size:.62rem !important;
  }

  .tks-user-card{
    padding-left:10px !important;
  }

  .tks-avatar{
    width:36px !important;
    height:36px !important;
  }
}

/* Desktop-specific tuning */
@media (min-width:1100px){
  header.tks-topbar{
    min-height:86px !important;
  }

  .tks-topbar h1{
    font-size:1.34rem !important;
  }
}


/* =========================================================
   TTM TKS V4.0 — NODE EDITOR BELOW HEADER
   Keeps the red title header visible while editing a node.
   Phone layout is unchanged.
   ========================================================= */

/* Tablet */
@media (min-width:700px) and (max-width:1099px){
  .flow-modal{
    position:fixed !important;
    top:98px !important;
    left:248px !important;
    right:18px !important;
    bottom:18px !important;
    inset:auto 18px 18px 248px !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
    z-index:80 !important;
    border-radius:16px !important;
    box-shadow:0 24px 60px rgba(15,23,42,.28) !important;
  }
}

/* Desktop */
@media (min-width:1100px){
  .flow-modal{
    position:fixed !important;
    top:102px !important;
    left:278px !important;
    right:22px !important;
    bottom:22px !important;
    inset:auto 22px 22px 278px !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
    z-index:80 !important;
    border-radius:16px !important;
    box-shadow:0 24px 60px rgba(15,23,42,.28) !important;
  }
}

/* Keep the red top header visible above the editor */
@media (min-width:700px){
  header.tks-topbar{
    z-index:90 !important;
  }

  .flow-modal{
    background:#fff !important;
  }

  .flow-modal::before{
    display:none !important;
  }
}

/* Phone remains exactly as approved */
@media (max-width:699px){
  .flow-modal{
    z-index:1200 !important;
  }
}


/* =========================================================
   TTM TKS V4.1 — NODE EDITOR SCROLL FIX
   ========================================================= */

@media (min-width:700px){
  .flow-modal{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-behavior:smooth !important;
    scroll-padding-top:16px !important;
    scrollbar-gutter:stable !important;
  }

  .flow-modal h2:first-child{
    position:sticky !important;
    top:0 !important;
    z-index:12 !important;
    margin:0 0 16px !important;
    padding:16px 0 12px !important;
    background:linear-gradient(to bottom,#fff 84%,rgba(255,255,255,0)) !important;
  }

  .flow-modal::-webkit-scrollbar{
    width:10px;
  }

  .flow-modal::-webkit-scrollbar-track{
    background:#eef1f4;
    border-radius:10px;
  }

  .flow-modal::-webkit-scrollbar-thumb{
    background:#929ba7;
    border-radius:10px;
    border:2px solid #eef1f4;
  }

  .flow-modal::-webkit-scrollbar-thumb:hover{
    background:#68717d;
  }
}

@media (min-width:700px) and (max-width:1099px){
  .flow-modal{
    top:96px !important;
    bottom:16px !important;
    max-height:calc(100vh - 112px) !important;
  }
}

@media (min-width:1100px){
  .flow-modal{
    top:100px !important;
    bottom:18px !important;
    max-height:calc(100vh - 118px) !important;
  }
}


/* =========================================================
   TTM TKS V4.2 — REMOVE AVATAR INITIAL + SIDEBAR TOGGLE
   ========================================================= */

@media (min-width:700px){
  .tks-mobile-menu{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    padding:0 !important;
    margin:0 12px 0 0 !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:10px !important;
    background:rgba(17,24,39,.14) !important;
    color:#fff !important;
    font-size:1.15rem !important;
    line-height:1 !important;
    cursor:pointer !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .tks-mobile-menu:hover,
  .tks-mobile-menu:focus-visible{
    background:rgba(17,24,39,.28) !important;
    border-color:rgba(255,255,255,.36) !important;
    outline:none !important;
  }

  .tks-user-card-no-avatar{
    min-width:auto !important;
    padding:8px 12px !important;
    gap:0 !important;
  }

  .tks-user-card-no-avatar .tks-user-copy{
    margin:0 !important;
    text-align:left !important;
  }

  /* Collapsed sidebar */
  body.tks-sidebar-collapsed .tks-sidebar{
    width:78px !important;
  }

  body.tks-sidebar-collapsed .tks-main{
    margin-left:78px !important;
    width:calc(100% - 78px) !important;
  }

  body.tks-sidebar-collapsed .tks-brand{
    justify-content:center !important;
    padding:14px 8px !important;
  }

  body.tks-sidebar-collapsed .tks-brand-copy,
  body.tks-sidebar-collapsed .tks-version,
  body.tks-sidebar-collapsed .tks-nav-label,
  body.tks-sidebar-collapsed .tks-sidebar-footer,
  body.tks-sidebar-collapsed .tks-sidebar nav.tks-nav > a > span:last-child{
    display:none !important;
  }

  body.tks-sidebar-collapsed .tks-sidebar nav.tks-nav{
    padding:10px 8px 18px !important;
  }

  body.tks-sidebar-collapsed .tks-sidebar nav.tks-nav > a{
    justify-content:center !important;
    padding:11px 8px !important;
    gap:0 !important;
  }

  body.tks-sidebar-collapsed .tks-nav-icon{
    flex-basis:22px !important;
    width:22px !important;
    height:22px !important;
  }

  body.tks-sidebar-collapsed .tks-nav-icon svg{
    width:21px !important;
    height:21px !important;
  }

  body.tks-sidebar-collapsed .flow-modal{
    left:96px !important;
    inset:auto 18px 18px 96px !important;
  }
}

/* Phone remains unchanged */
@media (max-width:699px){
  .tks-mobile-menu{
    display:none !important;
  }
}


/* =========================================================
   TTM TKS V2.43 — PHONE-ONLY FLOW BUILDER CANVAS FIX
   Tablet and desktop remain unchanged.
   ========================================================= */

.phone-flow-quickbar{
  display:none;
}

@media (max-width:699px){
  .flow-toolbar-card{
    position:sticky !important;
    top:82px !important;
    z-index:55 !important;
    padding:10px !important;
    margin-bottom:10px !important;
    border-radius:12px !important;
  }

  .phone-flow-quickbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }

  .phone-flow-menu-toggle,
  .phone-flow-save-quick{
    min-height:46px;
    padding:10px 12px;
    border-radius:10px;
    font-size:.82rem;
    font-weight:800;
    white-space:nowrap;
  }

  .phone-flow-menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#151922;
  }

  .phone-flow-menu-toggle-icon{
    font-size:1rem;
    line-height:1;
  }

  .phone-flow-save-quick{
    background:#d71920;
  }

  .flow-toolbar-card.phone-flow-menu-collapsed .flow-toolbar-main,
  .flow-toolbar-card.phone-flow-menu-collapsed .flow-help-text{
    display:none !important;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-toolbar-main{
    display:block !important;
    margin-top:10px;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-help-text{
    display:none !important;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-node-actions{
    display:flex !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    padding:0 0 8px !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-node-actions button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:112px !important;
    min-height:44px !important;
    padding:9px 12px !important;
    scroll-snap-align:start;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-mobile-controls{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-mobile-controls button{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:8px 5px !important;
    font-size:.75rem !important;
  }

  /* Hide the duplicate Save Flow button inside the expanded menu. */
  .flow-toolbar-card.phone-flow-menu-open .flow-mobile-controls > button:last-child{
    display:none !important;
  }

  .builder{
    height:calc(100dvh - 258px) !important;
    min-height:430px !important;
    margin-top:0 !important;
    margin-bottom:14px !important;
  }
}

@media (max-width:420px){
  .phone-flow-quickbar{
    grid-template-columns:minmax(0,1fr) 96px;
  }

  .phone-flow-menu-toggle,
  .phone-flow-save-quick{
    font-size:.75rem;
    padding-left:8px;
    padding-right:8px;
  }

  .flow-toolbar-card.phone-flow-menu-open .flow-mobile-controls{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   TTM TKS V2.44 — PHONE FLOW BUILDER PINCH ZOOM
   ========================================================= */

.flow-stage{
  position:relative;
  width:2200px;
  height:1500px;
  min-width:2200px;
  min-height:1500px;
  transform-origin:0 0;
}

.phone-flow-zoombar{
  display:none;
}

@media (max-width:600px){
  .phone-flow-zoombar{
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 12px 9px;
    border-top:1px solid #edf0f4;
    background:#fff;
  }

  .phone-flow-zoombar button{
    min-width:42px;
    min-height:38px;
    padding:6px 10px;
    border-radius:10px;
    font-size:1rem;
    font-weight:850;
  }

  .phone-flow-zoombar .flow-zoom-label{
    min-width:66px;
    background:#161b25;
  }

  .phone-flow-pinch-hint{
    margin-left:auto;
    color:#6c7482;
    font-size:.72rem;
    font-weight:750;
    white-space:nowrap;
  }

  .builder{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }

  .flow-stage{
    touch-action:pan-x pan-y;
  }

  body.flow-dragging .builder,
  body.flow-dragging .flow-stage{
    touch-action:none;
  }
}

@media (max-width:390px){
  .phone-flow-pinch-hint{
    display:none;
  }
}


/* =========================================================
   TTM TKS V2.45 — DESKTOP POINT-TO-POINT CONNECTIONS
   Desktop only. Phone and tablet behavior remain unchanged.
   ========================================================= */

.flow-connector{
  display:none;
}

@media (min-width:1024px){
  .node{
    overflow:visible;
  }

  .flow-connector{
    position:absolute;
    z-index:8;
    display:block;
    width:16px;
    height:16px;
    padding:0;
    border:3px solid #fff;
    border-radius:50%;
    background:#df1721;
    box-shadow:0 0 0 2px #a80f17,0 3px 8px rgba(0,0,0,.22);
    cursor:crosshair;
    opacity:.28;
    transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease;
  }

  .node:hover .flow-connector,
  .node.is-selected .flow-connector,
  body.flow-connecting .flow-connector{
    opacity:1;
  }

  .flow-connector:hover{
    transform:scale(1.3);
    box-shadow:0 0 0 3px rgba(223,23,33,.22),0 4px 10px rgba(0,0,0,.24);
  }

  .connector-top{top:-10px;left:calc(50% - 8px)}
  .connector-right{right:-10px;top:calc(50% - 8px)}
  .connector-bottom{bottom:-10px;left:calc(50% - 8px)}
  .connector-left{left:-10px;top:calc(50% - 8px)}

  body.flow-connecting,
  body.flow-connecting *{
    cursor:crosshair !important;
    user-select:none !important;
  }

  .node.connection-target{
    outline:4px solid rgba(223,23,33,.34);
    outline-offset:6px;
  }

  .connections .connection-preview{
    stroke:#df1721;
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:9 7;
    pointer-events:none;
  }
}


/* =========================================================
   TTM TKS V2.46 — DESKTOP CONNECTOR FUNCTION FIX
   Prevent global button styles from stretching connector dots.
   ========================================================= */

@media (min-width:1024px){
  .node > .flow-connector{
    position:absolute !important;
    display:block !important;
    width:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    height:18px !important;
    min-height:18px !important;
    max-height:18px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    background:#df1721 !important;
    box-sizing:border-box !important;
    font-size:0 !important;
    flex:0 0 18px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  .node > .connector-top{
    top:-9px !important;
    right:auto !important;
    bottom:auto !important;
    left:calc(50% - 9px) !important;
  }

  .node > .connector-right{
    top:calc(50% - 9px) !important;
    right:-9px !important;
    bottom:auto !important;
    left:auto !important;
  }

  .node > .connector-bottom{
    top:auto !important;
    right:auto !important;
    bottom:-9px !important;
    left:calc(50% - 9px) !important;
  }

  .node > .connector-left{
    top:calc(50% - 9px) !important;
    right:auto !important;
    bottom:auto !important;
    left:-9px !important;
  }

  body.flow-connecting .node > .flow-connector{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .node.connection-target > .flow-connector{
    transform:scale(1.35);
    box-shadow:
      0 0 0 5px rgba(223,23,33,.18),
      0 3px 9px rgba(0,0,0,.26) !important;
  }
}


/* =========================================================
   TTM TKS V2.47 — SIMPLE ONE CONNECTOR
   Desktop only; phone and tablet remain unchanged.
   ========================================================= */

@media (min-width:1024px){
  .node > .flow-connector{
    opacity:0 !important;
    pointer-events:none !important;
    transition:
      opacity .16s ease,
      transform .16s ease,
      box-shadow .16s ease !important;
  }

  .node:hover > .flow-connector,
  .node.is-selected > .flow-connector,
  body.flow-connecting .node > .flow-connector{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .node > .connector-top{
    top:-10px !important;
    right:auto !important;
    bottom:auto !important;
    left:calc(50% - 10px) !important;
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    background:#df1721 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.28) !important;
    z-index:8 !important;
  }

  .node.connection-target > .connector-top{
    transform:scale(1.35) !important;
    background:#23a455 !important;
    box-shadow:
      0 0 0 6px rgba(35,164,85,.20),
      0 3px 12px rgba(0,0,0,.30) !important;
  }

  .node > .connector-right,
  .node > .connector-bottom,
  .node > .connector-left{
    display:none !important;
  }
}