:root {
  --bg: #fff8f2;
  --surface: #fff0e6;
  --card: #ffffff;
  --card2: #ffeedd;
  --border: #f5c9a0;
  --accent: #e8500a;
  --accent2: #ff7c35;
  --gold: #e67e00;
  --green: #1a9c4a;
  --red: #d93025;
  --blue: #1a73e8;
  --yellow: #f0a500;
  --text: #1a1a1a;
  --muted: #555555;
  --muted2: #444444;
  --r: 14px;
  --r2: 20px;
  --shadow: 0 4px 20px rgba(220,100,30,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
h1,h2,h3,h4,h5{font-family:'Baloo 2',sans-serif;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

.hidden{display:none!important;}
.flex{display:flex;} .flex-c{display:flex;align-items:center;} .flex-b{display:flex;align-items:center;justify-content:space-between;}
.gap4{gap:4px;} .gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;} .gap20{gap:20px;}
.col{flex-direction:column;}
.w100{width:100%;}
.mt4{margin-top:4px;} .mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt20{margin-top:20px;} .mt24{margin-top:24px;}
.mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;} .mb16{margin-bottom:16px;} .mb20{margin-bottom:20px;} .mb24{margin-bottom:24px;}
.p12{padding:12px;} .p16{padding:16px;} .p20{padding:20px;} .p24{padding:24px;}
.text-muted{color:var(--muted2);} .text-sm{font-size:0.82rem;} .text-xs{font-size:0.72rem;} .text-lg{font-size:1.1rem;} .text-xl{font-size:1.3rem;}
.bold{font-weight:700;} .semibold{font-weight:600;}
.text-center{text-align:center;}
.text-accent{color:var(--accent);}
.text-green{color:var(--green);}
.text-red{color:var(--red);}
.text-gold{color:var(--gold);}
.text-blue{color:var(--blue);}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:20px;}
.card-sm{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;}

.btn{padding:10px 20px;border-radius:var(--r);border:none;cursor:pointer;font-family:'Nunito',sans-serif;font-size:0.9rem;font-weight:600;transition:all 0.2s;display:inline-flex;align-items:center;gap:7px;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:linear-gradient(135deg,var(--accent),#c2185b);color:#fff;box-shadow:0 4px 15px rgba(233,30,140,0.3);}
.btn-primary:hover{box-shadow:0 6px 20px rgba(233,30,140,0.5);}
.btn-success{background:linear-gradient(135deg,var(--green),#00c853);color:#000;font-weight:700;}
.btn-danger{background:rgba(255,82,82,0.15);color:var(--red);border:1px solid rgba(255,82,82,0.3);}
.btn-danger:hover{background:rgba(255,82,82,0.3);}
.btn-ghost{background:var(--card2);color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-gold{background:linear-gradient(135deg,#ffd700,#ff8f00);color:#000;font-weight:700;}
.btn-wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;}
.btn-sm{padding:7px 14px;font-size:0.8rem;border-radius:10px;}
.btn-xs{padding:5px 10px;font-size:0.72rem;border-radius:8px;}
.btn-icon{padding:8px;border-radius:10px;background:var(--card2);border:1px solid var(--border);cursor:pointer;transition:all 0.2s;}
.btn-icon:hover{border-color:var(--accent);}

.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:0.82rem;color:var(--muted2);margin-bottom:6px;font-weight:600;letter-spacing:0.3px;}
input,select,textarea{width:100%;padding:11px 14px;background:#fff0e6;border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:'Nunito',sans-serif;font-size:0.9rem;transition:border-color 0.2s;outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
input::placeholder{color:var(--muted);}
select option{background:#fff0e6;}

.badge{padding:3px 10px;border-radius:20px;font-size:0.72rem;font-weight:700;letter-spacing:0.3px;display:inline-block;}
.badge-green{background:rgba(0,230,118,0.15);color:var(--green);}
.badge-red{background:rgba(255,82,82,0.15);color:var(--red);}
.badge-gold{background:rgba(255,215,0,0.15);color:var(--gold);}
.badge-blue{background:rgba(64,196,255,0.15);color:var(--blue);}
.badge-accent{background:rgba(233,30,140,0.15);color:var(--accent);}

.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;min-width:600px;}
thead tr{background:#fff0e6;}
th{padding:12px 14px;text-align:left;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted2);font-weight:700;white-space:nowrap;}
td{padding:11px 14px;border-top:1px solid rgba(46,46,85,0.5);font-size:0.85rem;vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.02);}

.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);z-index:2000;align-items:center;justify-content:center;padding:16px;}
.modal-bg.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:28px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn 0.25s ease;}
.modal-lg{max-width:700px;}
.modal-xl{max-width:900px;}
@keyframes modalIn{from{transform:scale(0.94) translateY(10px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-header h3{font-size:1.2rem;}
.modal-close{background:var(--card2);border:1px solid var(--border);color:var(--muted2);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.modal-close:hover{border-color:var(--red);color:var(--red);}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}

.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 20px;border-radius:var(--r);font-size:0.88rem;font-weight:600;animation:toastIn 0.3s ease;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);}
.toast-success{background:linear-gradient(135deg,#1a4a2e,#2d7a4e);border:1px solid var(--green);color:var(--green);}
.toast-error{background:linear-gradient(135deg,#4a1a1a,#7a2d2d);border:1px solid var(--red);color:var(--red);}
.toast-info{background:linear-gradient(135deg,#1a2a4a,#2d4a7a);border:1px solid var(--blue);color:var(--blue);}
@keyframes toastIn{from{transform:translateX(100px);opacity:0;}to{transform:translateX(0);opacity:1;}}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:20px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
.stat-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.stat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(233,30,140,0.05),transparent);opacity:0;transition:opacity 0.2s;}
.stat-card:hover::before{opacity:1;}
.stat-icon{font-size:1.8rem;margin-bottom:10px;}
.stat-val{font-family:'Baloo 2',sans-serif;font-size:2rem;font-weight:800;line-height:1;}
.stat-label{font-size:0.78rem;color:var(--muted2);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px;}

/* Landing */
#screen-landing{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at 30% 50%,rgba(232,80,10,0.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 20%,rgba(255,124,53,0.06) 0%,transparent 60%),var(--bg);}
.landing-box{text-align:center;max-width:480px;width:100%;}
.landing-logo{width:80px;height:80px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 20px;box-shadow:0 0 60px rgba(233,30,140,0.4);animation:logoPulse 3s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{box-shadow:0 0 40px rgba(233,30,140,0.4);}50%{box-shadow:0 0 80px rgba(233,30,140,0.7);}}
.landing-title{font-size:clamp(1.5rem,5vw,2.2rem);font-weight:800;margin-bottom:4px;}
.landing-sub{color:var(--muted2);font-size:0.9rem;margin-bottom:36px;}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mode-btn{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:28px 20px;cursor:pointer;transition:all 0.3s;text-align:center;}
.mode-btn:hover{transform:translateY(-4px);}
.mode-btn.pc-mode:hover{border-color:var(--accent);box-shadow:0 8px 30px rgba(233,30,140,0.2);}
.mode-btn.mobile-mode:hover{border-color:var(--green);box-shadow:0 8px 30px rgba(0,230,118,0.2);}
.mode-btn-icon{font-size:2.2rem;margin-bottom:12px;}
.mode-btn h3{font-size:1rem;margin-bottom:6px;}
.mode-btn p{font-size:0.78rem;color:var(--muted2);line-height:1.4;}
.mode-badge-pc{background:rgba(233,30,140,0.15);color:var(--accent);padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:700;display:inline-block;margin-top:10px;}
.mode-badge-mb{background:rgba(0,230,118,0.12);color:var(--green);padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:700;display:inline-block;margin-top:10px;}

/* Login */
#screen-pc-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:36px;width:100%;max-width:400px;}
.login-logo{text-align:center;margin-bottom:24px;}
.login-logo .logo-icon{font-size:2.4rem;margin-bottom:8px;}

/* Topbar */
#screen-pc-dash{min-height:100vh;background:var(--bg);}
.topbar{background:linear-gradient(135deg,#e8500a 0%,#ff7c35 100%);border-bottom:none;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(232,80,10,0.25);}
.topbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:0.9rem;display:flex;align-items:center;gap:10px;color:#fff;}
.topbar-brand .logo-sm{width:36px;height:36px;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.topbar-brand > div{line-height:1.2;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.loc-selector{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;color:var(--text);font-family:'Nunito',sans-serif;font-size:0.85rem;cursor:pointer;min-width:160px;}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:5px 14px 5px 5px;}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700;}
.sb-status{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--card);border:1px solid var(--border);border-radius:20px;font-size:0.75rem;font-weight:600;}
.sb-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
.sb-dot.connected{background:var(--green);box-shadow:0 0 8px rgba(0,230,118,0.5);}
.sb-dot.error{background:var(--red);}

/* Dashboard layout */
.dash-layout{display:flex;height:calc(100vh - 60px);}
.sidebar{width:200px;background:#fff3ea;border-right:1px solid var(--border);padding:16px;flex-shrink:0;overflow-y:auto;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);cursor:pointer;font-size:0.88rem;font-weight:600;color:var(--muted2);margin-bottom:4px;transition:all 0.2s;}
.sidebar-item:hover{background:var(--card2);color:var(--text);}
.sidebar-item.active{background:rgba(233,30,140,0.15);color:var(--accent);border-left:3px solid var(--accent);padding-left:9px;}
.sidebar-icon{font-size:1.1rem;width:22px;text-align:center;}
.dash-content{flex:1;overflow-y:auto;padding:24px;}
.panel{display:none;}
.panel.active{display:block;}

/* Warning card */
.warning-card{background:linear-gradient(135deg,rgba(255,82,82,0.1),rgba(255,107,53,0.05));border:1px solid rgba(255,82,82,0.3);border-radius:var(--r);padding:14px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.warning-days{background:var(--red);color:#fff;padding:2px 8px;border-radius:20px;font-size:0.72rem;font-weight:700;}

/* Batch today report */
.batch-report-card{background:#fff0e6;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;}
.batch-report-header{background:linear-gradient(135deg,rgba(233,30,140,0.15),rgba(255,107,53,0.08));padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.batch-report-title{font-family:'Baloo 2',sans-serif;font-size:0.95rem;font-weight:700;color:var(--text);}
.batch-report-counts{display:flex;gap:10px;align-items:center;}
.batch-count-pill{padding:4px 12px;border-radius:20px;font-size:0.78rem;font-weight:700;}
.batch-count-pill.present{background:rgba(0,230,118,0.15);color:var(--green);border:1px solid rgba(0,230,118,0.3);}
.batch-count-pill.absent{background:rgba(255,82,82,0.15);color:var(--red);border:1px solid rgba(255,82,82,0.3);}
.batch-report-body{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.batch-section{padding:14px 18px;}
.batch-section:first-child{border-right:1px solid var(--border);}
.batch-section-hdr{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.batch-section-hdr.p{color:var(--green);}
.batch-section-hdr.a{color:var(--red);}
.student-chip{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(46,46,85,0.3);}
.student-chip:last-child{border-bottom:none;}
.student-chip-name{font-size:0.83rem;font-weight:600;}
.student-chip-reg{font-size:0.72rem;color:var(--muted2);}
.no-batch-data{text-align:center;padding:30px;color:var(--muted2);font-size:0.85rem;}
.today-summary-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.today-sum-box{border-radius:var(--r);padding:14px 18px;text-align:center;}
.today-sum-box.p{background:rgba(0,230,118,0.08);border:1px solid rgba(0,230,118,0.25);}
.today-sum-box.a{background:rgba(255,82,82,0.08);border:1px solid rgba(255,82,82,0.25);}

/* Mobile warning popup */
.mob-warn-popup{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.mob-warn-box{background:var(--card);border:2px solid rgba(255,235,59,0.5);border-radius:var(--r2);padding:28px 24px;max-width:340px;width:100%;text-align:center;animation:modalIn 0.25s ease;}
.mob-warn-icon{font-size:3rem;margin-bottom:12px;}
.mob-warn-title{font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800;color:var(--yellow);margin-bottom:8px;}
.mob-warn-msg{font-size:0.85rem;color:var(--muted2);line-height:1.6;margin-bottom:20px;white-space:pre-line;}
.mob-warn-count{display:inline-block;background:rgba(255,235,59,0.15);border:1px solid rgba(255,235,59,0.4);border-radius:20px;padding:4px 14px;font-size:0.82rem;font-weight:700;color:var(--yellow);margin-bottom:16px;}

/* Mobile dashboard */
#screen-mobile-dash{min-height:100vh;background:var(--bg);max-width:480px;margin:0 auto;}
.mobile-header{background:linear-gradient(135deg,#0d0d2a,#1a1a35);border-bottom:1px solid var(--border);padding:16px 18px;position:sticky;top:0;z-index:50;}
.mobile-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mobile-brand{font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:800;}
.mobile-brand span{color:var(--accent);}
.date-badge{background:var(--card);border:1px solid var(--border);padding:5px 12px;border-radius:20px;font-size:0.78rem;color:var(--muted2);}
.mobile-content{padding:16px 18px;padding-bottom:100px;}
.att-student-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px;transition:all 0.2s;}
.att-student-card.present{border-color:var(--green);background:rgba(0,230,118,0.05);}
.att-student-card.absent{border-color:var(--red);background:rgba(255,82,82,0.05);}
.att-student-info{flex:1;}
.att-student-name{font-weight:700;font-size:0.92rem;}
.att-student-meta{font-size:0.75rem;color:var(--muted2);margin-top:2px;}
.att-due-badge{background:rgba(255,235,59,0.15);border:1px solid rgba(255,235,59,0.3);color:var(--yellow);padding:2px 8px;border-radius:20px;font-size:0.7rem;font-weight:700;}
.att-btns{display:flex;gap:6px;}
.att-btn{width:40px;height:40px;border-radius:10px;border:none;cursor:pointer;font-size:1.1rem;transition:all 0.15s;display:flex;align-items:center;justify-content:center;}
.att-btn.p{background:rgba(0,230,118,0.15);}
.att-btn.p:hover,.att-btn.p.sel{background:var(--green);}
.att-btn.a{background:rgba(255,82,82,0.15);}
.att-btn.a:hover,.att-btn.a.sel{background:var(--red);}
.mobile-submit-bar{position:fixed;bottom:0;left:0;right:0;background:#fff0e6;border-top:1px solid var(--border);padding:14px 18px;display:flex;gap:10px;max-width:480px;margin:0 auto;}

/* Calendar */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px;}
.cal-cell{text-align:center;padding:8px 4px;border-radius:8px;font-size:0.8rem;cursor:pointer;transition:all 0.2s;}
.cal-cell:hover{background:var(--card2);}
.cal-cell.today{background:rgba(233,30,140,0.2);color:var(--accent);font-weight:700;}
.cal-cell.selected{background:var(--accent);color:#fff;}
.cal-cell.has-data::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--green);margin:2px auto 0;}
.cal-header{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day{text-align:center;font-size:0.7rem;color:var(--muted2);padding:4px;font-weight:700;}

/* PC mode mobile button */
.pc-mode-btn-mb{padding:6px 12px;border-radius:8px;background:rgba(233,30,140,0.15);border:1px solid rgba(233,30,140,0.3);color:var(--accent);font-size:0.75rem;cursor:pointer;font-weight:700;}

/* Sidebar toggle (mobile) */
.sidebar-toggle{display:none;padding:8px;background:var(--card2);border:1px solid var(--border);border-radius:8px;cursor:pointer;}

/* Location card */
.loc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:20px;margin-bottom:14px;}
.loc-stats{display:flex;gap:20px;margin:14px 0;}
.loc-stat{text-align:center;}
.loc-stat .num{font-family:'Baloo 2',sans-serif;font-size:1.4rem;font-weight:800;color:var(--accent);}
.loc-stat .lbl{font-size:0.72rem;color:var(--muted2);}
.pin-display{background:#fff0e6;border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-family:monospace;font-size:1.1rem;letter-spacing:3px;display:inline-block;}

/* Search bar */
.search-bar{position:relative;}
.search-bar input{padding-left:36px;}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:0.9rem;}

/* Section header */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.sec-hdr h2{font-size:1.4rem;}

/* Att row */
.att-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(46,46,85,0.4);}
.att-row:last-child{border-bottom:none;}

/* Flexi */
.flexi-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-size:0.65rem;font-weight:700;padding:2px 8px;border-radius:20px;}
.flexi-counter{display:flex;align-items:center;gap:5px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px;padding:3px 10px;margin-top:5px;font-size:0.78rem;flex-wrap:wrap;}
.flexi-warn{color:#dc2626;font-weight:700;}

/* Icon */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0;}
.sidebar-icon .ico,.btn .ico{width:1.1em;height:1.1em;}
.stat-icon .ico{width:1.6rem;height:1.6rem;}

/* Responsive */
@media(max-width:768px){
  .sidebar{position:fixed;left:-200px;top:60px;height:calc(100vh - 60px);z-index:200;transition:left 0.3s;}
  .sidebar.open{left:0;}
  .sidebar-toggle{display:flex;}
  .mode-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .batch-report-body{grid-template-columns:1fr;}
  .batch-section:first-child{border-right:none;border-bottom:1px solid var(--border);}
}

/* PWA banners */
#pwa-banner,#ios-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;}