:root {
      --bg:#0b0d10; --card:#12161c; --border:#1e2632;
      --text:#e9eef5; --muted:#9aa5b1;
      --btn-inc:#24324a; --btn-undo:#1a1f29; --btn-reset:#3a1d22;
      --btn-inc-text:#ffffff; --btn-inc-font-scale:1;
      --accent:#2979ff; --green:#00e676; --red:#ff1744; --amber:#ffc400;
    }
    /* SECURITY: Disable selection and touch highlighting globally */
    *{
      box-sizing:border-box; 
      -webkit-tap-highlight-color:transparent;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    /* Allow selection only on inputs so you can actually edit them */
    input { 
      -webkit-user-select: text; 
      -moz-user-select: text; 
      -ms-user-select: text; 
      user-select: text; 
    }

    body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);padding-bottom:60px; overflow-x:hidden;}
    .wrap{max-width:600px;margin:0 auto;padding:12px; transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: filter, transform;}

    .header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; }
    h1{font-size:16px;margin:0;font-weight:700;opacity:.9;cursor:pointer;display:flex;align-items:center;gap:8px;}
    
    .badge{font-size:10px;padding:2px 6px;border-radius:4px;text-transform:uppercase;font-weight:800;}
    .badge.dev{background:#d32f2f;color:#fff;display:none;}
    .dev-active .badge.dev{display:inline-block;}
    .badge.clock{background:#333;color:#ccc;font-variant-numeric:tabular-nums;}
    
    .header-actions{display:flex;gap:8px;align-items:center;}
    .header-center{flex:1;display:flex;justify-content:center;}
    .header-btn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 10px;border-radius:8px;font-size:11px;font-weight:700;}
    .header-btn:hover{color:#fff;border-color:#445065;}

    .config-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
    .task-bar{margin-top:10px;display:flex;align-items:center;gap:8px;}
    .task-group{background:#161b24;padding:4px;border-radius:10px;display:flex;gap:6px;border:1px solid var(--border);flex:1;}
    .task-btn{flex:1;text-align:center;font-size:12px;padding:7px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:700;background:transparent;border:1px solid transparent;}
    .task-btn.active{background:#2c3545;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);border-color:#3a465c;}
    .task-btn.more{flex:0 0 auto;padding:7px 10px;margin-left:auto;}
    .task-dropdown{position:relative;}
    .task-menu{position:absolute;right:0;top:44px;background:#12161c;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.45);padding:6px;display:none;z-index:20;min-width:160px;}
    .task-menu.active{display:block;}
    .task-menu button{width:100%;justify-content:flex-start;font-size:12px;padding:8px 10px;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--text);}
    .task-menu button:hover{background:#222b39;border-color:#2d384a;}
    .task-menu button.active{background:#2c3545;border-color:#3a465c;color:#fff;}
    .divider{height:1px;background:var(--border);margin:12px 0;}
    .toggle-group{background:#1a1f29;padding:3px;border-radius:8px;display:flex;border:1px solid var(--border);}
    .toggle-opt{flex:1;text-align:center;font-size:12px;padding:6px;border-radius:6px;cursor:pointer;color:var(--muted);font-weight:600;}
    .toggle-opt.active{background:#2c3545;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}

    .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;}
    .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
    .muted{opacity:.7;font-size:11px;text-transform:uppercase;font-weight:600;letter-spacing:.5px;}
    .big{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}

    input[type="number"],input[type="time"],input[type="text"]{
      background:#080a0d;border:1px solid #263044;color:#fff;
      padding:8px;border-radius:8px;width:100%;font-size:14px;font-family:inherit;text-align:center;
    }
    input:disabled{opacity:.5;border-color:transparent;color:#aaa;}

    .shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
    .break-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
    .break-row label{flex:1;font-size:12px;color:#ccc;}
    .break-row input{flex:0 0 90px;}

    button{border:none;font-family:inherit;cursor:pointer;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .1s;}
    button:active{transform:scale(.98);}
    .btn-blue{background:var(--accent);color:#fff;width:100%;padding:12px;font-size:14px;}
    .btn-red{background:var(--btn-reset);color:#ff8a80;padding:8px 12px;font-size:12px;border:1px solid rgba(255,0,0,.1);}
    .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px;}

    .btn-flow {
      position: relative;
      overflow: hidden;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); 
      background: #000;
      padding: 0;
      border-radius: 12px;
      transform: translateZ(0);
    }
    
    .btn-flow canvas {
      position: absolute;
      top: -15%; left: -15%;
      width: 130%; height: 130%;
      z-index: 1;
      pointer-events: none;
      filter: blur(8px);
      opacity: 0.85;
    }

    .btn-flow span.label-text {
      position: relative;
      z-index: 2;
      font-size: 16px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 3px;
      text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
      pointer-events: none;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    .status-box{padding:10px;border-radius:8px;background:#161b24;text-align:center;margin-top:10px;border:1px solid var(--border);}
    .st-dot{height:8px;width:8px;background:#555;border-radius:50%;display:inline-block;margin-right:6px;}
    .st-text{font-size:13px;font-weight:600;}
    .status-working .st-dot{background:var(--green);box-shadow:0 0 8px var(--green);} 
    .status-working .st-text{color:var(--green);} 
    .status-break .st-dot{background:var(--amber);box-shadow:0 0 8px var(--amber);} 
    .status-break .st-text{color:var(--amber);} 
    .status-offtask .st-dot{background:var(--red);box-shadow:0 0 8px var(--red);} 
    .status-offtask .st-text{color:var(--red);} 

    .kpi-row{display:flex;gap:8px;margin-bottom:10px;}
    .kpi-box{flex:1;background:#191e28;padding:10px;border-radius:10px;text-align:center;}
    .kpi-val{font-size:18px;font-weight:700;display:block;margin-top:4px;}

    .btn-main-inc{width:100%;height:100px;background:var(--btn-inc);color:var(--btn-inc-text);font-size:calc(40px * var(--btn-inc-font-scale));font-weight:900;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);border:2px solid #303b4f;position:relative;flex-direction:column;gap:4px; will-change: transform;}
    .btn-timer{font-size:12px;font-weight:700;color:#c7d2e4;letter-spacing:.4px;text-transform:uppercase;}
    .btn-undo{background:var(--btn-undo);color:#ccc;border:1px solid #303b4f;}

    .var-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;background:#191e28;padding:6px;border-radius:10px;}
    .var-info{flex:1;margin-left:8px;}
    .var-btn{height:40px;font-size:18px;color:var(--btn-inc-text);border-radius:8px;}
    .vb-inc{background:var(--btn-inc);flex:1;font-size:calc(18px * var(--btn-inc-font-scale));} 
    .vb-dec{background:var(--btn-undo);color:#999;width:40px;font-size:14px;}
    .action-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;background:#191e28;padding:6px;border-radius:10px;}
    .action-info{flex:1;margin-left:8px;}
    .action-count{font-size:14px;font-weight:700;}

    #devPanel{display:none;border:1px solid #d32f2f;background:#2a0a0a;padding:12px;margin-top:20px;border-radius:12px;}
    .dev-active #devPanel{display:block;}
    .color-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:5px;}
    .color-item label{font-size:10px;color:#aaa;display:block;margin-bottom:4px;}
    input[type="color"]{width:100%;height:30px;padding:0;border:none;background:none;}

    .hidden{display:none !important;}
    .text-green{color:var(--green);} 
    .text-red{color:var(--red);} 

    body.flow-active{padding-bottom:0; overflow:hidden;}
    
    body.flow-active .wrap{
      pointer-events:none; 
      filter: blur(5px) brightness(0.7) grayscale(0.4);
      transform: scale(0.96);
    }

    body.flow-active .config-bar,
    body.flow-active #devPanel,
    body.flow-active #shiftConfig,
    body.flow-active #btnAreaVar .btn-red,
    body.flow-active #btnAreaGlobal .btn-undo,
    body.flow-active > .wrap .card:nth-of-type(3) .muted,
    body.flow-active button.btn-ghost[style*="width:100%"],
    body.flow-active button.btn-ghost[onclick*="exportReport"]
    { display:none !important; }

    #flowOverlay{
      position:fixed; inset:0; z-index:99999; display:none;
      background:rgba(0,0,0,0.01);
      touch-action:manipulation;
      animation: fadeIn 0.3s ease-out;
      --flow-text-scale: 1.2;
    }
    @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

    body.flow-active #flowOverlay{display:block;}

    #flowOverlay, #flowOverlay *{
      text-shadow: 0 1px 0 rgba(0,0,0,0.95), 0 -1px 0 rgba(0,0,0,0.95), 1px 0 0 rgba(0,0,0,0.95), -1px 0 0 rgba(0,0,0,0.95), 1px 1px 0 rgba(0,0,0,0.85), -1px 1px 0 rgba(0,0,0,0.85), 1px -1px 0 rgba(0,0,0,0.85), -1px -1px 0 rgba(0,0,0,0.85);
    }

    #flowClose{
      position:absolute; top:10px; right:calc(28px + env(safe-area-inset-right));
      width:44px; height:44px; border-radius:12px;
      background:rgba(20,24,30,0.75); border:1px solid rgba(255,255,255,0.12);
      color:#fff; font-size:calc(24px * var(--flow-text-scale)); font-weight:900;
      display:flex; align-items:center; justify-content:center;
    }

    #flowDecTop{
      position:absolute; top:10px; right:calc(82px + env(safe-area-inset-right));
      width:44px; height:44px; border-radius:12px;
      background:rgba(26,31,41,0.85);
      border:1px solid rgba(255,255,255,0.12);
      color:#cfd6e2;
      font-size:calc(22px * var(--flow-text-scale)); font-weight:950;
      display:none;
    }

    #flowThemePicker{
      position:absolute; top:10px; left:calc(10px + env(safe-area-inset-left));
      display:flex; align-items:center; gap:8px;
      padding:6px 10px;
      border-radius:12px;
      background:rgba(12,14,18,0.7);
      border:1px solid rgba(255,255,255,0.12);
      color:#e9eef5;
      z-index:2;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    #flowSizeControl{
      position:absolute; top:60px; left:calc(10px + env(safe-area-inset-left));
      display:flex; align-items:center; gap:10px;
      padding:6px 10px;
      border-radius:12px;
      background:rgba(12,14,18,0.7);
      border:1px solid rgba(255,255,255,0.12);
      color:#e9eef5;
      z-index:2;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #flowThemeSpanControl{
      position:absolute; top:110px; left:calc(10px + env(safe-area-inset-left));
      display:flex; align-items:center; gap:10px;
      padding:6px 10px;
      border-radius:12px;
      background:rgba(12,14,18,0.7);
      border:1px solid rgba(255,255,255,0.12);
      color:#e9eef5;
      z-index:2;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #flowThemeSpanControl label{font-size:calc(12px * var(--flow-text-scale)); font-weight:900; letter-spacing:.4px; text-transform:uppercase; opacity:.8;}
    #flowThemeSpanControl input{width:110px;}
    #flowThemeSpanValue{font-size:calc(12px * var(--flow-text-scale)); font-weight:800; min-width:40px; text-align:right;}
    #flowSizeControl label{
      font-size:calc(12px * var(--flow-text-scale)); font-weight:900; letter-spacing:.4px; text-transform:uppercase; opacity:.8;
    }
    #flowSizeControl input{width:120px;}
    #flowThemePicker label{
      font-size:calc(12px * var(--flow-text-scale)); font-weight:900; letter-spacing:.4px; text-transform:uppercase; opacity:.8;
    }
    #flowThemePicker select{
      background:rgba(9,11,16,0.9);
      color:#fff;
      border:1px solid rgba(255,255,255,0.15);
      border-radius:8px;
      padding:6px 10px;
      font-size:calc(12px * var(--flow-text-scale));
      font-weight:800;
      font-family:inherit;
    }

    #flowHUD{
      position:absolute; top:160px; left:10px;
      padding:10px 12px; border-radius:14px;
      background:rgba(12,14,18,0.55);
      border:1px solid rgba(255,255,255,0.12);
      color:#fff;
      max-width: calc(100% - 136px);
      pointer-events:none;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .flowCornerStats{
      position:absolute; top:10px; left:10px;
      display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
      padding:10px 12px;
      border-radius:14px;
      background:rgba(12,14,18,0.38);
      border:1px solid rgba(255,255,255,0.10);
      max-width: calc(100% - 20px);
      pointer-events:none;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .flowCornerStats .k{font-size:calc(12px * var(--flow-text-scale)); opacity:.7; text-transform:uppercase; letter-spacing:.5px; font-weight:800;}
    .flowCornerStats .v{font-size:calc(17px * var(--flow-text-scale)); font-weight:950; font-variant-numeric:tabular-nums;}

    .flowCornerStats.var{
      background:rgba(12,14,18,0.32);
      border-color:rgba(255,255,255,0.10);
      max-width: calc(100% - 20px);
    }
    #flowHUD .row{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
    #flowHUD .k{font-size:calc(12px * var(--flow-text-scale)); opacity:.7; text-transform:uppercase; letter-spacing:.5px; font-weight:800;}
    #flowHUD .v{font-size:calc(17px * var(--flow-text-scale)); font-weight:900; font-variant-numeric:tabular-nums;}
    #flowTotalBig{font-size:calc(34px * var(--flow-text-scale)); font-weight:950; letter-spacing:-.5px;}
    #flowVarTotals{display:flex; gap:10px; align-items:baseline;}
    #flowVarTotals .s{font-size:calc(24px * var(--flow-text-scale)); font-weight:950;}
    #flowVarTotals .m{font-size:calc(19px * var(--flow-text-scale)); font-weight:900; opacity:.95;}
    #flowVarTotals .l{font-size:calc(17px * var(--flow-text-scale)); font-weight:850; opacity:.9;}
    #flowCdpsTotals{display:flex; gap:10px; align-items:baseline;}
    #flowCdpsTotals .s{font-size:calc(24px * var(--flow-text-scale)); font-weight:950;}
    #flowCdpsTotals .m{font-size:calc(19px * var(--flow-text-scale)); font-weight:900; opacity:.95;}

    #flowRecovery{
      margin-top:8px;
      padding-top:8px;
      border-top:1px solid rgba(255,255,255,0.10);
      font-size:calc(14px * var(--flow-text-scale));
      font-weight:800;
      letter-spacing:.2px;
      font-variant-numeric:tabular-nums;
      opacity:.95;
    }

    #flowButtons{
      position:absolute; inset:120px 10px 10px 10px;
      display:flex; flex-direction:column; gap:10px;
    }

    .flowRow{flex:1; display:flex; gap:10px;}

    .flowDec{
      flex:0 0 calc(12% - 5px);
      border-radius:18px;
      background:rgba(26,31,41,0.92);
      border:2px solid rgba(48,59,79,0.9);
      color:#cfd6e2;
      font-size:calc(22px * var(--flow-text-scale)); font-weight:950;
    }

    .flowInc{
      flex:1;
      border-radius:18px;
      background:rgba(36,50,74,0.95);
      border:2px solid rgba(48,59,79,0.95);
      color:#fff;
      font-size:calc(77px * var(--flow-text-scale)); font-weight:980;
      position:relative;
      flex-direction:column;
      gap:6px;
      /* Optimization: Separate composite layer for gradients to avoid full page repaints */
      will-change: background; 
    }
    .flowCount{font-size:calc(77px * var(--flow-text-scale)); font-weight:980; line-height:1;}
    .flowHint{font-size:calc(13px * var(--flow-text-scale)); font-weight:900; opacity:.72; text-transform:uppercase; letter-spacing:.6px;}
    .flowLabel{font-size:calc(14px * var(--flow-text-scale)); font-weight:900; opacity:.8; text-transform:uppercase; letter-spacing:.6px;}
    .flowInc .flowLabel{position:absolute; top:10px; right:10px; left:auto; text-align:right;}

    #flowGlobalRow .flowInc{height:100%;}
    #flowGlobalRow .flowCount{font-size:calc(101px * var(--flow-text-scale));}
    #flowLastGlobal{font-size:calc(14px * var(--flow-text-scale)); font-weight:900; opacity:.78; text-transform:uppercase; letter-spacing:.6px;}
    .flowLast{font-size:calc(14px * var(--flow-text-scale)); font-weight:900; opacity:.78; text-transform:uppercase; letter-spacing:.6px;}
    
    .modal-overlay{
      position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:99990;
      display:none; align-items:center; justify-content:center; padding:16px;
    }
    .modal-overlay.active{display:flex;}
    .modal{
      width:100%; max-width:680px; max-height:90vh; overflow:auto;
      background:#10141b; border:1px solid var(--border); border-radius:16px; padding:16px;
      box-shadow:0 18px 40px rgba(0,0,0,.6);
    }
    .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;}
    .modal-title{font-size:14px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;}
    .modal-close{background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 10px;border-radius:8px;}
    .table{width:100%;border-collapse:collapse;font-size:12px;}
    .table th,.table td{padding:8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
    .table th{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.4px;}
    .table input,.table select{font-size:12px;padding:6px;border-radius:6px;}
    .table-actions{display:flex;gap:6px;}
    .modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
    .pill{font-size:10px;padding:2px 6px;border-radius:999px;background:#1b2230;color:#b0bac7;font-weight:700;}
    
    .shift-items-edit{display:flex; gap:6px; align-items:center;}
    .shift-items-edit input{width:78px;}
    .shift-items-edit .btn-ghost{padding:4px 8px; min-width:40px;}
.calendar-bar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
    .calendar-bar button{font-size:11px;padding:6px 8px;border-radius:8px;background:#1b2230;color:#c6d0dd;border:1px solid #2a3545;}
    .calendar-bar button.active{background:#2c3545;color:#fff;border-color:#3a465c;}
    .fab-calendar{
      position:fixed; left:12px; bottom:12px; z-index:1000;
      background:#1b2230; color:#cbd5e1; border:1px solid #2a3545;
      padding:8px 12px; border-radius:12px; font-size:11px; font-weight:800;
      box-shadow:0 8px 18px rgba(0,0,0,.35);
    }

    @media (max-width:420px){
      .flowInc{font-size:calc(67px * var(--flow-text-scale));}
      .flowCount{font-size:calc(67px * var(--flow-text-scale));}
      #flowGlobalRow .flowCount{font-size:calc(86px * var(--flow-text-scale));}
      #flowTotalBig{font-size:calc(31px * var(--flow-text-scale));}
      #flowHUD{max-width: calc(100% - 136px);}
    }