:root{
    --wine-950:#300c19;
    --wine-900:#431021;
    --wine-800:#5b172c;
    --wine-700:#721e38;
    --wine-600:#8a2945;
    --wine-500:#a13a56;
    --rose-100:#f8eef1;
    --rose-50:#fcf8f9;
    --ink:#292125;
    --muted:#786d71;
    --line:#e7dde0;
    --white:#fff;
    --green:#52755d;
    --amber:#a47438;
    --red:#a0444d;
    --blue:#566b89;
    --shadow:0 18px 45px rgba(67,16,33,.08)}*{box-sizing:border-box}

    
    html{
        scroll-behavior:smooth
    }
    
    body{
        margin:0;
        font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        color:var(--ink);
        background:linear-gradient(145deg,#fff 0%,var(--rose-50) 100%);
        -webkit-font-smoothing:antialiased
    }
    
    button,input,select,textarea{
        font:inherit
    }
    
    button{
        cursor:pointer
    }
        
    .shell{
        width:min(1160px,calc(100% - 48px));
        margin:auto
        }
    
    .landing{
        min-height:100vh;
        display:flex;
        flex-direction:column
    }
    
    .topbar{
        padding:25px 0;
        display:flex;
        align-items:center;
        justify-content:space-between
    }
    
    .brand{
        display:inline-flex;
        align-items:center;
        gap:11px;
        text-decoration:none;
        color:var(--wine-950)
    }
    
    .brand-mark{
        width:48px;
        height:48px;
        border-radius:12px;
        display:block;
        overflow:hidden;
        background:#fff;
        box-shadow:0 4px 14px rgba(67,16,33,.18)
    }

    .hero-logo{
        display:block;
        width:104px;
        height:104px;
        margin:0 auto 18px;
        border-radius:16px;
        box-shadow:0 8px 24px rgba(67,16,33,.15)
    }

    .brand-mark img,.login-mark img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover
    }
    
    .brand-glyph{
        font-size:25px;
        line-height:1;
        transform:rotate(-20deg)
    }
    
    .brand strong{
        display:block;
        font-size:17px;
        letter-spacing:-.02em
    }
    
    .brand small{
        display:block;
        margin-top:2px;
        color:var(--muted);
        font-size:10px;
        letter-spacing:.08em;
        text-transform:uppercase
    }
    
    .availability{
        display:flex;
        gap:8px;
        align-items:center;
        color:#766b6f;
        font-size:12px
    }
    
    .availability i{
        width:7px;
        height:7px;
        border-radius:50%;
        background:#708b76;
        box-shadow:0 0 0 4px rgba(112,139,118,.1)
    }
    
    .landing-main{
        flex:1;
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:55px 0
    }
    
    .hero{
        text-align:center;
        max-width:670px;
        margin:0 auto 38px
    }
    
    .eyebrow{
        color:var(--wine-600);
        font-size:10px;
        font-weight:750;
        letter-spacing:.16em
    }
    
    .hero h1{
        margin:11px 0;
        color:var(--wine-950);
        font-size:clamp(36px,5vw,52px);
        line-height:1.04;
        letter-spacing:-.045em
    }
    
    .hero p{
        margin:0;
        color:var(--muted);
        font-size:15px;
        line-height:1.65
    }
    
    .entry-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px
    }
    
    .entry-card{
        min-height:210px;
        position:relative;
        display:flex;
        gap:18px;
        padding:29px;
        border:1px solid var(--line);
        border-radius:22px;
        background:rgba(255,255,255,.88);
        box-shadow:0 9px 35px rgba(67,16,33,.05);
        text-decoration:none;
        color:var(--ink);
        transition:.2s
    }
    
    .entry-card:hover{
        transform:translateY(-4px);
        border-color:#d5bdc5;
        box-shadow:var(--shadow)
    }
    
    .entry-icon{
        flex:0 0 49px;
        width:49px;
        height:49px;
        border-radius:15px;
        display:grid;
        place-items:center;
        color:var(--wine-700);
        background:var(--rose-100)
    }
    
    .entry-icon svg{
        width:25px;
        height:25px;
        stroke:currentColor;
        fill:none;
        stroke-width:1.55;
        stroke-linecap:round;
        stroke-linejoin:round
    }
    
    .entry-copy{
        display:flex;
        flex-direction:column
    }
    
    .entry-copy small{
        font-size:10px;
        letter-spacing:.15em;
        color:var(--wine-600);
        font-weight:750
    }
    
    .entry-copy b{
        margin-top:7px;
        font-size:21px;
        color:var(--wine-950)
    }
    
    .entry-copy span{
        margin-top:9px;
        max-width:360px;
        color:var(--muted);
        font-size:13px;
        line-height:1.6
    }
    
    .entry-arrow{
        position:absolute;
        right:25px;
        bottom:21px;
        color:var(--wine-600);
        font-size:22px
    }
    
    .security-note{
        text-align:center;
        color:#8a7d81;
        font-size:11px;
        margin-top:24px
    }
    
    .footer{
        padding:19px 0 23px;
        border-top:1px solid rgba(216,199,205,.7);
        display:flex;
        justify-content:space-between;
        color:#988b8f;
        font-size:10px
    }
    
    .app-body{
        min-height:100vh;
        background:#f8f5f6
    }
    
    .app-topbar{
        height:73px;
        background:#fff;
        border-bottom:1px solid var(--line)
    }
    
    .topbar-inner{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:space-between
    }
    
    .top-actions{
        display:flex;
        align-items:center;
        gap:12px
    }
    
    .icon-btn,.logout{
        border:0;
        background:transparent;
        color:#7c7074
    }
    
    .icon-btn{
        font-size:20px
    }
    
    .logout{
        padding:7px 4px;
        font-size:12px
    }
    
    .avatar{
        width:33px;
        height:33px;
        display:grid;
        place-items:center;
        border-radius:50%;
        color:var(--wine-800);
        background:var(--rose-100);
        font-size:10px;
        font-weight:750
    }
    
    .tech-avatar{
        color:#40526c;
        background:#edf1f6
    }
    
    .user-name{
        font-size:12px;
        font-weight:600
    }
    
    .app-shell{
        display:grid;
        grid-template-columns:220px minmax(0,1fr);
        min-height:calc(100vh - 73px)
    }
    
    .sidebar{
        padding:28px 15px 20px 0;
        border-right:1px solid var(--line);
        display:flex;
        flex-direction:column
    }
    
    .sidebar nav{
        display:grid;
        gap:4px
    }
    
    .nav-item{
        display:flex;
        align-items:center;
        gap:11px;
        padding:11px 13px;
        border-radius:9px;
        color:#706569;
        text-decoration:none;
        font-size:12px;
        font-weight:550
    }
    
    .nav-item span{
        width:17px;
        text-align:center;
        font-size:16px;
        color:#8a7b80
    }
    
    .nav-item:hover{
        background:#f2eaed;
        color:var(--wine-800)
    }
    
    .nav-item.active{
        color:var(--wine-800);
        background:#f1e5e9
    }
    
    .nav-count{
        margin-left:auto;
        padding:2px 7px;
        border-radius:20px;
        background:var(--wine-700);
        color:#fff;
        font-size:9px;
        font-style:normal
    }
    
    .sidebar-bottom{
        margin-top:auto;
        padding:17px;
        border-radius:12px;
        background:#f1e7ea
    }
    
    .sidebar-bottom span{
        display:block;
        color:#85777b;
        font-size:10px
    }
    
    .sidebar-bottom a{
        display:block;
        margin-top:5px;
        color:var(--wine-700);
        font-size:11px;
        font-weight:650;
        text-decoration:none
    }
    
    .content{
        padding:42px 0 70px 34px;
        min-width:0
    }
    
    .content.narrow{
        max-width:1060px
    }
    
    .page-heading{
        display:flex;
        justify-content:space-between;
        align-items:end;
        gap:25px;
        margin-bottom:28px
    }
    
    .page-heading h1{
        margin:7px 0 6px;
        color:var(--wine-950);
        font-size:31px;
        letter-spacing:-.04em
    }
    
    .page-heading p{
        margin:0;
        color:var(--muted);
        font-size:13px
    }
    
    .primary-btn,.secondary-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        height:39px;
        padding:0 16px;
        border-radius:9px;
        border:1px solid transparent;
        font-size:12px;
        font-weight:650
    }
    
    .primary-btn{
        color:#fff;
        background:linear-gradient(135deg,var(--wine-700),var(--wine-900));
        box-shadow:0 7px 16px rgba(67,16,33,.15)
    }
    
    .secondary-btn{
        background:#fff;
        border-color:var(--line);
        color:var(--wine-800)
    }
    
    .stat-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:13px;
        margin-bottom:22px
    }
    
    .stat-card{
        padding:18px 19px;
        border:1px solid var(--line);
        border-radius:13px;
        background:#fff
    }
    
    .stat-label{
        display:block;
        color:#817478;
        font-size:10px
    }
    
    .stat-card strong{
        display:block;
        margin:8px 0 4px;
        color:var(--wine-950);
        font-size:26px;
        letter-spacing:-.04em
    }
    
    .stat-card strong.wine{
        color:var(--wine-600)
    }
    
    .stat-card small{
        color:#998c90;
        font-size:9px
    }
    
    .panel{
        border:1px solid var(--line);
        border-radius:14px;
        background:#fff;
        box-shadow:0 6px 24px rgba(67,16,33,.035)
    }
    
    .panel-heading{
        padding:19px 20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:15px;
        border-bottom:1px solid var(--line)
    }
    
    .panel-heading h2{
        margin:0;
        color:var(--wine-950);
        font-size:15px
    }
    
    .panel-heading p{
        margin:4px 0 0;
        color:var(--muted);
        font-size:10px
    }
    
    .text-link,.back-link{
        color:var(--wine-700);
        font-size:11px;
        font-weight:650;
        text-decoration:none
    }
    
    .ticket-row{
        display:grid;
        grid-template-columns:80px minmax(200px,1fr) 125px 115px 15px;
        align-items:center;
        gap:12px;
        padding:15px 20px;
        border-bottom:1px solid #f0e9eb;
        text-decoration:none;
        color:inherit;
        transition:.15s
    }
    
    .ticket-row:last-child{
        border-bottom:0
    }
    
    .ticket-row:hover{
        background:#fdfafb
    }
    
    .ticket-id{
        color:#897b80;
        font-size:10px;
        font-weight:650
    }
    
    .ticket-main{
        min-width:0
    }
    
    .ticket-main b{
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#3a3034;
        font-size:12px
    }
    
    .ticket-main small{
        display:block;
        margin-top:4px;
        color:#9a8d91;
        font-size:9px
    }
    
    .ticket-date,.assignee{
        color:#8a7d81;
        font-size:9px
    }
    
    .badge{
        display:inline-flex;
        width:max-content;
        align-items:center;
        padding:5px 8px;
        border-radius:20px;
        font-size:8px;
        font-weight:700;
        white-space:nowrap
    }
    
    .badge-progress{
        color:#725329;
        background:#f5eee3
    }
    
    .badge-wait{
        color:#775a76;
        background:#f2eaf2
    }
    
    .badge-done{
        color:#4d6d56;
        background:#eaf1eb
    }
    
    .badge-new{
        color:#5d6982;
        background:#edf0f5
    }
    
    .quick-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:13px;
        margin-top:13px
    }
    
    .quick-card{
        padding:18px;
        border:1px solid var(--line);
        border-radius:13px;
        background:#fff;
        text-decoration:none
    }
    
    .quick-icon{
        display:grid;
        place-items:center;
        width:31px;
        height:31px;
        border-radius:9px;
        color:var(--wine-700);
        background:var(--rose-100)
    }
    
    .quick-card b{
        display:block;
        margin-top:12px;
        color:var(--wine-950);
        font-size:11px
    }
    
    .quick-card small{
        display:block;
        margin-top:4px;
        color:var(--muted);
        font-size:9px
    }
    
    .form-layout{
        display:grid;
        grid-template-columns:minmax(0,1fr) 280px;
        gap:16px
    }
    
    .form-panel{
        padding:24px
    }
    
    .field{
        margin-bottom:22px
    }
    
    .field:last-child{
        margin-bottom:0
    }
    
    .field>label:first-child{
        display:block;
        margin-bottom:8px;
        color:#493d41;
        font-size:11px;
        font-weight:650
    }
    
    .field em{
        color:var(--wine-600);
        font-style:normal
    }
    
    .field small{
        display:block;
        margin-top:6px;
        color:#978a8e;
        font-size:9px
    }
    
    .field input:not([type=radio]),.field select,.field textarea{
        width:100%;
        border:1px solid #ddd2d6;
        border-radius:9px;
        background:#fff;
        color:#32282c;
        outline:0;
        padding:11px 12px;
        font-size:12px;
        transition:.15s
    }
    
    .field input:focus,.field select:focus,.field textarea:focus{border-color:#a96a7c;box-shadow:0 0 0 3px rgba(161,58,86,.08)}.field textarea{resize:vertical;line-height:1.55}.priority-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.priority-options label{padding:11px;border:1px solid var(--line);border-radius:9px;cursor:pointer}.priority-options label.selected{border-color:#bc8999;background:#fcf5f7}.priority-options input{display:none}.priority-options b{display:block;font-size:10px}.priority-options small{font-size:8px}.upload{min-height:100px!important;border:1px dashed #d6c6cb;border-radius:10px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#fdfafb}.upload input{display:none}.upload-icon{font-size:19px;color:var(--wine-600)}.upload b{margin-top:5px;font-size:10px}.upload small{margin-top:3px}.tips{padding:20px}.tips h3{margin:0 0 17px;color:var(--wine-950);font-size:13px}.tips>div{padding:12px 0;border-top:1px solid var(--line)}.tips b{font-size:10px}.tips p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.5}.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:13px;margin-top:14px}.form-actions a{color:#827478;text-decoration:none;font-size:10px}.success-box{display:none;margin-top:12px;padding:12px;border-radius:9px;background:#edf4ef;color:#4e6e57;font-size:10px}.success-box.show{display:block}.success-box span{display:block;margin-top:3px}.back-link{display:inline-block;margin-bottom:18px}.ticket-header{display:flex;justify-content:space-between;gap:25px;margin-bottom:23px}.ticket-header h1{margin:7px 0 9px;color:var(--wine-950);font-size:27px;letter-spacing:-.035em}.ticket-meta{display:flex;gap:9px;align-items:center;color:#897c80;font-size:9px;flex-wrap:wrap}.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:15px}.conversation{padding:22px}.message{display:grid;grid-template-columns:32px 1fr;gap:12px;padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid #eee7e9}.message-avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--rose-100);color:var(--wine-700);font-size:8px;font-weight:750}.message-avatar.tech{background:#edf1f6;color:#52657f}.message-head{display:flex;gap:10px;align-items:center}.message-head b{font-size:10px}.message-head small{color:#9b8e92;font-size:8px}.message p{margin:8px 0 0;color:#61565a;font-size:11px;line-height:1.65}.reply-box textarea{width:100%;min-height:90px;border:1px solid #ddd2d6;border-radius:9px;padding:11px;resize:vertical;outline:0;font-size:11px}.reply-box>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}.reply-box span{color:#a09296;font-size:8px}.ticket-info{padding:20px;height:max-content}.ticket-info h3{margin:0 0 18px;color:var(--wine-950);font-size:13px}.ticket-info dl{margin:0}.ticket-info dt{margin-top:15px;color:#988a8f;font-size:8px}.ticket-info dd{margin:4px 0 0;color:#4d4246;font-size:10px}.ticket-info dd small{color:#998c90;font-size:8px}.ticket-info select{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px;font-size:9px}.operation-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.sla-line{padding:13px 20px;border-bottom:1px solid #f0e9eb;display:grid;grid-template-columns:70px 65px 1fr;align-items:center;gap:10px;font-size:9px}.sla-line:last-child{border-bottom:0}.sla-line b{text-align:right;color:var(--wine-600)}.sla-bar{height:5px;border-radius:10px;background:#eee6e8;overflow:hidden}.sla-bar i{display:block;height:100%;background:var(--wine-600);border-radius:10px}.activity{list-style:none;margin:0;padding:3px 20px 13px}.activity li{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid #f0e9eb}.activity li:last-child{border:0}.activity i{width:7px;height:7px;margin-top:4px;border-radius:50%;background:#b98a98}.activity b{display:block;font-size:9px}.activity small{display:block;margin-top:3px;color:#9b8e92;font-size:8px}.filter-row{display:flex;gap:7px;flex-wrap:wrap}.filter-row input{border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-size:inherit;min-width:220px}.filter-row select{border:1px solid var(--line);border-radius:7px;padding:7px 8px;color:#75686d;font-size:9px;background:#fff}.priority-dot{width:7px;height:7px;border-radius:50%;justify-self:center}.priority-dot.high{background:#a0444d}.priority-dot.medium{background:#b38a50}.priority-dot.low{background:#78907e}.tech-list .ticket-row{grid-template-columns:12px 75px minmax(180px,1fr) 105px 105px 15px}.header-tags{display:flex;align-items:center;gap:8px}.header-actions{display:flex;gap:8px;align-items:center}.internal-note{padding:12px 13px;border-radius:9px;background:#f7f0e7;color:#806842;font-size:9px;margin-bottom:20px}.internal-note span{display:block;margin-top:3px;color:#9b8665}.response-tabs{display:flex;gap:5px;margin-bottom:7px}.response-tabs button{border:0;background:transparent;padding:7px 9px;color:#93858a;font-size:9px}.response-tabs button.active{border-bottom:2px solid var(--wine-600);color:var(--wine-700);font-weight:700}.priority-text{font-weight:650}.high-text{color:#a0444d}.sla-warning{color:#a47438}.tag{display:inline-block;padding:3px 6px;margin:2px;border-radius:4px;background:#f1e8eb;color:#765963;font-size:8px}@media(max-width:900px){.app-shell{grid-template-columns:180px 1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.ticket-row{grid-template-columns:65px minmax(160px,1fr) 100px 15px}.ticket-row .ticket-date,.ticket-row .assignee{display:none}.tech-list .ticket-row{grid-template-columns:10px 65px minmax(150px,1fr) 100px 15px}.tech-list .ticket-row .assignee{display:none}.form-layout,.ticket-layout{grid-template-columns:1fr}.side-form{order:2}.ticket-info{order:0}}@media(max-width:700px){.shell{width:calc(100% - 30px)}.entry-grid,.quick-grid,.operation-grid{grid-template-columns:1fr}.user-name{display:none}.app-shell{display:block}.sidebar{display:none}.content{padding:27px 0 50px}.page-heading{align-items:start;flex-direction:column}.page-heading .primary-btn{width:100%}.stat-grid{grid-template-columns:1fr 1fr}.panel-heading{align-items:flex-start;flex-direction:column}.filter-row{width:100%}.filter-row select{flex:1}.ticket-row{grid-template-columns:65px minmax(0,1fr) 15px}.ticket-row .badge{display:none}.ticket-row .ticket-date,.ticket-row .assignee{display:none}.tech-list .ticket-row{grid-template-columns:8px 65px minmax(0,1fr) 15px}.header-actions{width:100%}.ticket-header{flex-direction:column}.header-actions .primary-btn,.header-actions .secondary-btn{flex:1}
    .footer{
        width:calc(100% - 30px);
        gap:7px;
        flex-direction:column
    }
    
    .topbar{
        width:calc(100% - 30px)
    }
    }
    
    /* =========================================================
   LOGIN MODAL
   ========================================================= */

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.login-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(48, 12, 25, .42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  padding: 31px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
  transform: translateY(10px) scale(.985);
  transition: transform .22s ease;
}

.login-modal.is-open .login-card {
  transform: translateY(0) scale(1);
}

.login-close {
  position: absolute;
  top: 16px;
  right: 17px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #988b8f;
  font-size: 23px;
  line-height: 1;
}

.login-close:hover {
  background: #f7eef1;
  color: var(--wine-800);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 31px;
}

.login-mark {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(67, 16, 33, .18);
}

.login-brand strong {
  display: block;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--wine-950);
}

.login-brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-heading > span {
  color: var(--wine-600);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .16em;
}

.login-heading h2 {
  margin: 9px 0 6px;
  color: var(--wine-950);
  font-size: 28px;
  letter-spacing: -.04em;
}

.login-heading p {
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.login-field {
  margin-bottom: 16px;
}

.login-field label {
  display: block;
  margin-bottom: 7px;
  color: #493d41;
  font-size: 10px;
  font-weight: 650;
}

.login-field input {
  width: 100%;
  height: 43px;
  border: 1px solid #ddd2d6;
  border-radius: 9px;
  background: #fff;
  color: #32282c;
  outline: 0;
  padding: 0 12px;
  font-size: 12px;
  transition: .15s;
}

.login-field input::placeholder {
  color: #b0a4a8;
}

.login-field input:focus {
  border-color: var(--wine-700);
  box-shadow: 0 0 0 3px rgba(161, 58, 86, .08);
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 19px;
}

.login-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #85777b;
  font-size: 9px;
  cursor: pointer;
}

.login-check input {
  accent-color: var(--wine-700);
}

.login-link {
  border: 0;
  background: transparent;
  color: var(--wine-700);
  font-size: 9px;
  font-weight: 650;
  padding: 3px;
}

.login-link:hover {
  text-decoration: underline;
}

.login-submit {
  width: 100%;
  height: 43px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine-700), var(--wine-900));
  box-shadow: 0 7px 16px rgba(67, 16, 33, .15);
  font-size: 12px;
  font-weight: 650;
}

.login-submit:hover {
  filter: brightness(1.04);
}

.login-submit:disabled {
  opacity: .65;
  cursor: wait;
}

.login-message {
  min-height: 15px;
  margin: 10px 0 0;
  color: var(--red);
  font-size: 9px;
  text-align: center;
}

.login-message.success {
  color: var(--green);
}

.login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 23px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: #988b8f;
  font-size: 8px;
  text-align: center;
}

.login-security span {
  color: #708b76;
  font-size: 7px;
}

@media (max-width: 480px) {
  .login-modal {
    padding: 15px;
  }

  .login-card {
    padding: 27px 22px;
    border-radius: 18px;
  }

  .login-heading h2 {
    font-size: 25px;
  }
}

/* =========================================================
   MODO ESCURO
   ========================================================= */

html[data-theme="dark"] {
  color-scheme: dark;
  --wine-950: #f2dde4;
  --wine-800: #e6b8c7;
  --wine-700: #d98aa2;
  --wine-600: #e0839e;
  --wine-500: #e0839e;
  --rose-100: #33232b;
  --rose-50: #1a1316;
  --ink: #ece4e7;
  --muted: #a79ba0;
  --line: #3a2d33;
  --white: #211a1e;
  --green: #86b894;
  --amber: #d1a063;
  --red: #e0737d;
  --blue: #8aa0c4;
  --shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] body { background: linear-gradient(145deg, #141012 0%, #1a1316 100%); }
html[data-theme="dark"] .app-body { background: #141012; }

html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .entry-card,
html[data-theme="dark"] .secondary-btn { background: #211a1e; }

html[data-theme="dark"] .login-card { background: rgba(33, 26, 30, .97); }
html[data-theme="dark"] .login-backdrop { background: rgba(0, 0, 0, .6); }

html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .login-submit,
html[data-theme="dark"] .nav-count {
  background: linear-gradient(135deg, #8a2945, #5b172c);
  color: #fff;
}


html[data-theme="dark"] .field input:not([type=radio]),
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .login-field input,
html[data-theme="dark"] .reply-box textarea,
html[data-theme="dark"] .filter-row select,
html[data-theme="dark"] .filter-row input,
html[data-theme="dark"] .ticket-info select {
  background: #1a1417;
  color: var(--ink);
  border-color: #4a3a41;
}

html[data-theme="dark"] .login-field input::placeholder { color: #7d7075; }

html[data-theme="dark"] .footer,
html[data-theme="dark"] .login-security,
html[data-theme="dark"] .login-close,
html[data-theme="dark"] .ticket-id,
html[data-theme="dark"] .ticket-date,
html[data-theme="dark"] .assignee,
html[data-theme="dark"] .ticket-meta,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .login-check,
html[data-theme="dark"] .sidebar-bottom span,
html[data-theme="dark"] .form-actions a { color: #a79ba0; }

html[data-theme="dark"] .ticket-main small,
html[data-theme="dark"] .stat-card small,
html[data-theme="dark"] .field small,
html[data-theme="dark"] .message-head small,
html[data-theme="dark"] .activity small,
html[data-theme="dark"] .ticket-info dt,
html[data-theme="dark"] .ticket-info dd small,
html[data-theme="dark"] .reply-box span { color: #8f8388; }

html[data-theme="dark"] .ticket-main b,
html[data-theme="dark"] .message p,
html[data-theme="dark"] .ticket-info dd,
html[data-theme="dark"] .field>label:first-child,
html[data-theme="dark"] .login-field label { color: var(--ink); }

html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .logout { color: #b3a7ac; }

html[data-theme="dark"] .nav-item { color: #b3a7ac; }
html[data-theme="dark"] .nav-item span { color: #9a8e93; }
html[data-theme="dark"] .nav-item:hover { background: #2a2025; }
html[data-theme="dark"] .nav-item.active { background: #34252c; }
html[data-theme="dark"] .sidebar-bottom { background: #2a2025; }
html[data-theme="dark"] .login-close:hover { background: #2a2025; }

html[data-theme="dark"] .tech-avatar,
html[data-theme="dark"] .message-avatar.tech { background: #26303f; color: #a9bbd6; }

html[data-theme="dark"] .ticket-row { border-bottom-color: #2d2328; }
html[data-theme="dark"] .ticket-row:hover { background: #271e23; }
html[data-theme="dark"] .sla-line,
html[data-theme="dark"] .activity li { border-bottom-color: #2d2328; }
html[data-theme="dark"] .sla-bar { background: #33282d; }
html[data-theme="dark"] .message { border-bottom-color: #33282d; }

html[data-theme="dark"] .badge-progress { color: #e0bd85; background: #3a2f1e; }
html[data-theme="dark"] .badge-wait { color: #d6b0d4; background: #382a38; }
html[data-theme="dark"] .badge-done { color: #9ccaa8; background: #1f3126; }
html[data-theme="dark"] .badge-new { color: #aebbd6; background: #26303f; }

html[data-theme="dark"] .priority-options label.selected { background: #3a2430; border-color: #8a4b63; }
html[data-theme="dark"] .upload { background: #1a1417; border-color: #4a3a41; }
html[data-theme="dark"] .success-box { background: #1f3126; color: #9ccaa8; }
html[data-theme="dark"] .success-box.error { background: #3a2128; color: #e8a0ac; }
html[data-theme="dark"] .internal-note { background: #33291a; color: #d9bb84; }
html[data-theme="dark"] .internal-note span { color: #bfa273; }
html[data-theme="dark"] .tag { background: #33232b; color: #d9aebd; }
html[data-theme="dark"] .response-tabs button { color: #a79ba0; }

.message.internal {
  background: #fbf6e9;
  border-radius: 10px;
  padding: 10px;
}

html[data-theme="dark"] .message.internal { background: #33291a; }

.success-box.error { background: #f8e9ec; color: #a0444d; }

/* Botão de alternar tema */
[data-theme-toggle] { font-size: 18px; line-height: 1; padding: 4px 6px; }

a.stat-card { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
a.stat-card:hover { border-color: var(--wine-500); }


.settings-bar{display:flex;gap:8px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.settings-bar select,.settings-bar input,.title-row input{border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:11px;background:#fff;color:inherit}
.settings-bar input{flex:1;min-width:220px}
.title-row{display:flex;gap:8px;align-items:center;padding:10px 20px;border-bottom:1px solid #f0e9eb}
.title-row input{flex:1;min-width:0}
.title-row.inactive input{opacity:.55}
html[data-theme="dark"] .settings-bar select,
html[data-theme="dark"] .settings-bar input,
html[data-theme="dark"] .title-row input{background:#1a1417;color:var(--ink)}
html[data-theme="dark"] .title-row{border-bottom-color:#2d2328}
.priority-info{padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fdfafb;font-size:12px;font-weight:650}
.title-row select,.settings-bar select{max-width:160px}
html[data-theme="dark"] .priority-info{background:#1a1417;border-color:#2d2328}
html[data-theme="dark"] .title-row select{background:#1a1417;color:var(--ink)}

/* Relatórios */
.report-controls{display:flex;gap:12px;flex-wrap:wrap;padding:16px 20px}
.report-controls .field{margin:0;min-width:150px;flex:1}
.report-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:0 20px;border-top:1px solid var(--line)}
.report-tabs .tab{border:0;background:transparent;padding:11px 12px;color:var(--muted);font-size:12px;cursor:pointer;border-bottom:2px solid transparent}
.report-tabs .tab.active{border-bottom-color:var(--wine-600);color:var(--wine-700);font-weight:700}
#viewPanel .stat-grid{margin-top:13px}
#viewPanel>.panel,#viewPanel .operation-grid>.panel{margin-top:0}
#viewPanel>.panel{margin-top:13px}
.chart-box{padding:12px 20px 16px}
.hbar-list{padding:8px 20px 16px}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr 34px;gap:10px;align-items:center;padding:5px 0;font-size:12px}
.hbar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{height:8px;border-radius:8px;background:#eee6e8;overflow:hidden}
.hbar-track i{display:block;height:100%;background:var(--wine-700);border-radius:8px}
.hbar b{text-align:right}
.muted-note{margin:8px 20px;color:var(--muted);font-size:12px}
.report-sub{margin:18px 20px 0;font-size:13px;color:var(--wine-950)}
.report-table-wrap{overflow-x:auto;padding:8px 20px 16px}
.report-table{width:100%;border-collapse:collapse;font-size:12px}
.report-table th,.report-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.report-table th{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.report-table td.num,.report-table th:not(:first-child){text-align:right}
.report-table.compact td,.report-table.compact th{text-align:left;font-size:11px;padding:6px 8px}
.report-table td.empty{text-align:center;color:var(--muted)}
.print-header,.print-footer{display:none}
html[data-theme="dark"] .hbar-track{background:#2d2328}
html[data-theme="dark"] .report-tabs .tab{color:var(--muted)}
html[data-theme="dark"] .report-controls select,html[data-theme="dark"] .report-controls input{background:#1a1417;color:var(--ink)}
@media print{
  html,body{background:#fff!important;color:#000!important}
  .app-topbar,.sidebar,.no-print,.page-heading{display:none!important}
  .app-shell{display:block!important;width:100%!important}
  .content{padding:0!important}
  .panel,.stat-card{box-shadow:none!important;border:1px solid #ccc!important;background:#fff!important;break-inside:avoid}
  .print-header{display:block;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #721e38;font-size:11px}
  .print-header p{margin:3px 0}
  .print-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .print-brand img{width:48px;height:48px}
  .print-brand h1{margin:0;font-size:18px}
  .print-footer{display:block;margin-top:14px;padding-top:8px;border-top:1px solid #ccc;font-size:9px;color:#444}
  .report-table th,.report-table td{color:#000!important}
  .report-table tr{break-inside:avoid}
  .operation-grid{break-inside:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.report-controls .field{font-size:11px}
.report-controls .field select,.report-controls .field input{font-size:12px;padding:8px 10px}

/* Menu no celular: faixa horizontal rolável em vez de esconder */
@media(max-width:700px){
  .sidebar{display:block;position:static;width:auto;min-height:0;padding:10px 0 0;border:0;background:transparent}
  .sidebar nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .sidebar .nav-item{flex:0 0 auto;white-space:nowrap;margin:0;padding:9px 12px}
  .sidebar-bottom{display:none}
  .content{padding-top:14px}
}