/**
 * pages/auth-login.css
 * Extracted verbatim from resources/views/auth/login.blade.php inline <style> block(s).
 * No rules changed.
 */
/* extracted block 1 */

  :root{
    --red:#e0241a; --red-deep:#a8160f; --red-soft:#fbe4e2;
    --green:#2bb673; --green-deep:#249a61; --green-soft:rgba(43,182,115,0.14);
    --blue:#3b82f6; --blue-deep:#2f6fd6; --blue-soft:rgba(59,130,246,0.14);
    --orange:#ff9d2e;
    --page-bg:#f4f4f4; --card-bg:#ffffff; --chip-bg:#fdeceb;
    --text-strong:#191615; --text-soft:#7a7574; --placeholder:#b9b4b3;
    --line:#ececec; --shadow:rgba(20,10,10,0.07);
  }
  html[data-theme="dark"]{
    --page-bg:#0c0c0c; --card-bg:#1c1c1c; --chip-bg:#2a1c1a;
    --text-strong:#f5f3f2; --text-soft:#9c9794; --placeholder:#6d6a68;
    --line:#2c2c2c; --shadow:rgba(0,0,0,0.55);
  }

  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  a{text-decoration:none;color:inherit;}
  html,body{
    background:var(--page-bg);font-family:'Work Sans',sans-serif;color:var(--text-strong);
    display:flex;justify-content:center;transition:background .3s ease,color .3s ease;
    overflow-x:hidden;width:100%;position:relative;min-height:100vh;
  }
  .phone{width:100%;max-width:430px;min-height:100vh;position:relative;padding-bottom:24px;}

  /* ===== HEADER HERO ===== */
  .header{
    background:linear-gradient(165deg,#ff3b30 0%,var(--red) 55%,var(--red-deep) 100%);
    border-radius:0 0 28px 28px;
    padding:calc(20px + env(safe-area-inset-top)) 20px 30px;
    color:#fff;text-align:center;position:relative;
  }
  .theme-toggle{
    position:absolute;top:calc(16px + env(safe-area-inset-top));right:18px;
    width:48px;height:28px;border-radius:18px;background:rgba(255,255,255,0.18);
    cursor:pointer;z-index:3;
  }
  .toggle-knob{
    position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.4,0,.2,1);
  }
  html[data-theme="dark"] .toggle-knob{left:23px;}
  .toggle-knob svg{width:12px;height:12px;stroke:var(--red);fill:none;}
  .toggle-knob .moon{display:none;}
  html[data-theme="dark"] .toggle-knob .sun{display:none;}
  html[data-theme="dark"] .toggle-knob .moon{display:block;}

  .logo-wrap{
    width:84px;height:84px;border-radius:50%;background:#fff;margin:4px auto 14px;
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);
    overflow:hidden;
  }
  .logo-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
  .logo-fallback{
    width:70px;height:70px;border-radius:50%;background:var(--red);
    display:none;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1;
  }
  .logo-fallback .lf1{font-size:16px;font-weight:800;font-style:italic;}
  .logo-fallback .lf2{font-size:7px;letter-spacing:1.4px;margin-top:3px;opacity:.85;}

  .header .app-title{font-size:22px;font-weight:800;}
  .header .app-sub{font-size:12.5px;font-weight:500;opacity:.9;margin-top:4px;}

  /* ===== CONTENT ===== */
  .content{padding:0 18px;}

  .card{
    background:var(--card-bg);border-radius:18px;box-shadow:0 8px 20px var(--shadow);
  }
  .login-card{padding:18px 16px;margin-top:-16px;position:relative;}

  .field-label{font-size:12.5px;font-weight:700;color:var(--text-strong);margin-bottom:7px;}
  .field-label.mt{margin-top:14px;}
  .input-row{
    display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);
    border-radius:12px;padding:0 14px;height:46px;background:var(--card-bg);
    transition:border-color .2s;
  }
  .input-row:focus-within{border-color:var(--red);}
  .input-row .lic{width:17px;height:17px;stroke:var(--red);flex-shrink:0;}
  .input-row input{
    flex:1;border:none;outline:none;background:transparent;font-family:'Work Sans',sans-serif;
    font-size:14px;font-weight:500;color:var(--text-strong);width:0;min-width:0;
  }
  .input-row input::placeholder{color:var(--placeholder);}
  .eye-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:2px;}
  .eye-btn svg{width:18px;height:18px;stroke:var(--text-soft);}

  .btn-masuk{
    margin-top:16px;width:100%;height:47px;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
    background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:14.5px;
    box-shadow:0 8px 18px rgba(224,36,26,.28);
  }
  .btn-masuk svg{width:17px;height:17px;stroke:#fff;}
  .btn-masuk:active{transform:translateY(1px);}

  .lupa{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:13px;font-size:13px;font-weight:700;color:var(--red);
  }
  .lupa svg{width:15px;height:15px;stroke:var(--red);}

  .err-box{
    background:var(--red-soft);border-radius:11px;padding:10px 12px;margin-bottom:14px;
    display:flex;gap:9px;align-items:flex-start;
  }
  .err-box svg{width:16px;height:16px;stroke:var(--red);flex-shrink:0;margin-top:1px;}
  .err-box .etext{font-size:12px;color:var(--red);font-weight:600;line-height:1.5;}

  /* ===== AKSES CEPAT ===== */
  .qa-card{padding:15px 15px 16px;margin:14px 0 6px;}
  .qa-head{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:14.5px;font-weight:800;color:var(--text-strong);
  }
  .qa-head .qic{
    width:24px;height:24px;border-radius:50%;background:var(--chip-bg);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .qa-head .qic svg{width:14px;height:14px;stroke:var(--red);}

  .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
  .qa-col .qa-title{
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:12.5px;font-weight:700;color:var(--text-strong);
    padding-bottom:9px;border-bottom:1px solid var(--line);
  }
  .qa-col .qa-title svg{width:16px;height:16px;}
  .qa-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:11px;
    color:#fff;font-weight:700;font-size:13px;margin-top:8px;
  }
  .qa-btn svg{width:15px;height:15px;stroke:#fff;}
  .qa-btn:active{transform:translateY(1px);}

  .green .qa-title svg{stroke:var(--green);}
  .qa-btn.g-masuk{background:var(--green);}
  .qa-btn.g-pulang{background:var(--green-deep);}
  .blue .qa-title svg{stroke:var(--blue);}
  .qa-btn.b-masuk{background:var(--blue);}
  .qa-btn.b-pulang{background:var(--blue-deep);}
  .qa-btn:first-of-type{margin-top:10px;}

  @media (max-width:360px){
    .header .app-title{font-size:20px;}
  }