* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html,
 body {
     width: 100%;
     min-height: 100vh;
 }

 body {
     background: #000;
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     overflow-x: hidden;
     position: relative;
 }

 #particleCanvas {
     position: fixed;
     inset: 0;
     z-index: 0;
 }

 .bg-grid {
     position: fixed;
     inset: 0;
     background-image: linear-gradient(rgba(0, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.04) 1px, transparent 1px);
     background-size: 40px 40px;
     pointer-events: none;
     z-index: 0;
 }

 .scanlines {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 9;
     background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.04) 3px, rgba(0, 0, 0, 0.04) 4px);
     opacity: 0.5;
 }

 .corner {
     position: fixed;
     width: 36px;
     height: 36px;
     z-index: 2;
 }

 .corner::before,
 .corner::after {
     content: '';
     position: absolute;
     background: #00ffff;
 }

 .corner::before {
     width: 100%;
     height: 1.5px;
     top: 0;
 }

 .corner::after {
     width: 1.5px;
     height: 100%;
     top: 0;
 }

 .corner.tl {
     top: 10px;
     left: 10px;
 }

 .corner.tr {
     top: 10px;
     right: 10px;
     transform: scaleX(-1);
 }

 .corner.bl {
     bottom: 10px;
     left: 10px;
     transform: scaleY(-1);
 }

 .corner.br {
     bottom: 10px;
     right: 10px;
     transform: scale(-1);
 }

 /* LOGIN */
 #loginScreen {
     position: fixed;
     inset: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
 }

 .login-box {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 400px;
     background: rgba(0, 3, 8, .95);
     border: 1px solid rgba(0, 255, 255, .2);
     padding: 36px 32px 28px;
     text-align: center;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     margin: auto;
 }

 .login-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, #00ffff, transparent);
 }

 .login-title {
     font-family: 'Orbitron', sans-serif;
     font-size: clamp(24px, 5vw, 36px);
     font-weight: 900;
     letter-spacing: clamp(6px, 2vw, 14px);
     color: #00ffff;
     text-shadow: 0 0 12px #00ffff, 0 0 24px rgba(0, 255, 255, .3);
     animation: titlePulse 3s ease-in-out infinite;
     margin-bottom: 8px;
 }

 @keyframes titlePulse {

     0%,
     100% {
         text-shadow: 0 0 10px #00ffff, 0 0 20px rgba(0, 255, 255, .2);
     }

     50% {
         text-shadow: 0 0 18px #00ffff, 0 0 36px rgba(0, 255, 255, .4), 0 0 60px rgba(0, 255, 255, .1);
     }
 }

 .login-sub {
     font-size: 13px;
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .35);
     margin-bottom: 24px;
     text-transform: uppercase;
 }

 .login-divider {
     display: flex;
     align-items: center;
     gap: 8px;
     justify-content: center;
     margin-bottom: 22px;
 }

 .ldl {
     height: 1px;
     width: 30px;
     background: linear-gradient(90deg, transparent, rgba(0, 255, 255, .25));
 }

 .ldl.r {
     background: linear-gradient(90deg, rgba(0, 255, 255, .25), transparent);
 }

 .ldd {
     width: 2px;
     height: 2px;
     border-radius: 50%;
     background: #00ffff;
     box-shadow: 0 0 4px #00ffff;
 }

 .btn-google {
     width: 100%;
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .28);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     letter-spacing: 2px;
     padding: 9px 12px;
     cursor: pointer;
     transition: all .2s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-bottom: 12px;
 }

 .btn-google:hover {
     background: rgba(0, 255, 255, .06);
     border-color: #00ffff;
     box-shadow: 0 0 10px rgba(0, 255, 255, .2);
 }

 .google-icon {
     width: 13px;
     height: 13px;
     flex-shrink: 0;
 }

 .login-or {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 18px;
 }

 .login-or-line {
     flex: 1;
     height: 1px;
     background: rgba(0, 255, 255, .08);
 }

 .login-or-text {
     font-size: 11px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .2);
 }

 .login-field {
     display: flex;
     flex-direction: column;
     gap: 5px;
     margin-bottom: 14px;
     text-align: left;
 }

 .login-label {
     font-size: 11px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .38);
 }

 .login-input {
     background: rgba(0, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .15);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 14px;
     padding: 13px 14px;
     outline: none;
     transition: all .2s;
     width: 100%;
 }

 .login-input:focus {
     border-color: rgba(0, 255, 255, .6);
     box-shadow: 0 0 6px rgba(0, 255, 255, .12);
 }

 .login-input::placeholder {
     color: rgba(0, 255, 255, .15);
 }

 .btn-login {
     width: 100%;
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .5);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     letter-spacing: 3px;
     padding: 9px;
     cursor: pointer;
     transition: all .2s;
     margin-top: 4px;
 }

 .btn-login:hover {
     background: rgba(0, 255, 255, .07);
     box-shadow: 0 0 10px rgba(0, 255, 255, .25);
 }

 .login-msg {
     font-size: 12px;
     letter-spacing: 1px;
     margin-top: 6px;
     min-height: 12px;
     text-align: center;
 }

 .login-msg.err {
     color: #ff6b6b;
 }

 .login-msg.ok {
     color: #00ff88;
 }

 .login-msg.loading {
     color: rgba(0, 255, 255, .4);
 }

 .login-toggle {
     margin-top: 10px;
     font-size: 12px;
     color: rgba(0, 255, 255, .25);
     letter-spacing: 1px;
 }

 .login-toggle a {
     color: rgba(0, 255, 255, .5);
     cursor: pointer;
     text-decoration: underline;
 }

 .login-toggle a:hover {
     color: #00ffff;
 }

 /* APP */
 #appScreen {
     display: none;
     min-height: 100vh;
     background: var(--bg, #000);
 }

 .app {
     position: relative;
     z-index: auto;
     width: 100%;
     max-width: 960px;
     margin: 0 auto;
     padding: 0 16px 80px;
 }

 .header {
     text-align: center;
     padding: 56px 0 28px;
 }

 .sys-title {
     font-family: 'Orbitron', sans-serif;
     font-size: clamp(32px, 7vw, 56px);
     font-weight: 900;
     letter-spacing: clamp(8px, 4vw, 22px);
     color: #00ffff;
     text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, .4);
     animation: titlePulse 3s ease-in-out infinite;
     margin-bottom: 10px;
 }

 .sys-sub {
     font-size: clamp(9px, 2vw, 12px);
     letter-spacing: clamp(2px, 1.5vw, 5px);
     color: rgba(0, 255, 255, .4);
     text-transform: uppercase;
 }

 .divider {
     display: flex;
     align-items: center;
     gap: 10px;
     justify-content: center;
     margin-top: 16px;
     margin-bottom: 12px;
 }

 .divider-line {
     height: 1px;
     width: clamp(30px, 8vw, 60px);
     background: linear-gradient(90deg, transparent, rgba(0, 255, 255, .4));
 }

 .divider-line.right {
     background: linear-gradient(90deg, rgba(0, 255, 255, .4), transparent);
 }

 .divider-dot {
     width: 3px;
     height: 3px;
     border-radius: 50%;
     background: #00ffff;
     box-shadow: 0 0 4px #00ffff;
 }

 /* USER CHIP */
 .user-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 16px;
     margin-top: 16px;
     margin-bottom: 0;
     flex-wrap: nowrap;
     gap: 8px;
     background: transparent;
 }

 .user-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 4px 10px 4px 4px;
     cursor: pointer;
     position: relative;
     background: transparent;
     border: none;
 }

 .user-chip:hover .chip-name {
     color: #00ffff;
 }

 .user-info {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .user-avatar {
     width: 34px;
     height: 34px;
     min-width: 34px;
     border-radius: 50%;
     border: 2px solid rgba(0, 255, 255, .5);
     object-fit: cover;
     object-position: center;
     box-shadow: 0 0 8px rgba(0, 255, 255, .3);
     display: block;
     overflow: hidden;
 }

 .user-avatar-placeholder {
     width: 34px;
     height: 34px;
     min-width: 34px;
     border-radius: 50%;
     border: 0px solid rgba(0, 255, 255, .5);
     background: rgba(0, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     color: #00ffff;
     box-shadow: 0 0 8px rgba(0, 255, 255, .3);
     overflow: hidden;
     flex-shrink: 0;
 }

 .user-chip .user-info img {
     width: 34px;
     height: 34px;
     min-width: 34px;
     border-radius: 50%;
     object-fit: cover;
     object-position: center;
     border: 0px solid rgba(0, 255, 255, .5);
     box-shadow: 0 0 8px rgba(0, 255, 255, .3);
     flex-shrink: 0;
 }

 .user-name {
     font-size: 15px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .8);
     transition: color .2s;
 }

 .user-email {
     display: none;
 }

 .chip-arrow {
     font-size: 12px;
     color: rgba(0, 255, 255, .5);
     transition: transform .2s;
     margin-left: 2px;
 }

 .user-chip.dd-open .chip-arrow {
     transform: rotate(180deg);
 }

 .btn-logout {
     display: none;
 }

 /* DROPDOWN cyberpunk animado */
 .user-dropdown {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     min-width: 180px;
     width: max-content;
     background: rgba(0, 3, 10, .97);
     z-index: 500;
     display: none;
     overflow: hidden;
 }

 .user-dropdown.show {
     display: block;
 }

 /* borda animada com gradiente em movimento */
 .user-dropdown {
     border: 1px solid rgba(0, 255, 255, .2);
 }

 .user-dropdown-canvas {
     position: absolute;
     inset: -1px;
     pointer-events: none;
     z-index: 10;
 }

 .user-dropdown-inner {
     position: relative;
     z-index: 1;
     background: rgba(0, 3, 10, .97);
 }

 .dd-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 11px 18px;
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .75);
     cursor: pointer;
     border-bottom: 1px solid rgba(0, 255, 255, .07);
     transition: all .15s;
     white-space: nowrap;
 }

 .dd-item:last-child {
     border: none;
 }

 .dd-item:hover {
     background: rgba(0, 255, 255, .07);
     color: #00ffff;
 }

 .dd-item.red {
     color: rgba(255, 107, 107, .7);
 }

 .dd-item.red:hover {
     background: rgba(255, 107, 107, .06);
     color: #ff6b6b;
 }

 /* ── PAINEL TÁTICO ── */
 .pt-table {
     width: 100%;
     border-collapse: collapse;
 }

 .pt-table th {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
     padding: 10px 14px;
     text-align: center;
     border-bottom: 1px solid rgba(0, 255, 255, .1);
     background: rgba(0, 0, 0, .3);
 }

 .pt-table th:first-child {
     text-align: left;
 }

 .pt-table td {
     padding: 11px 14px;
     border-bottom: 1px solid rgba(0, 255, 255, .06);
     font-size: 13px;
     text-align: center;
     vertical-align: middle;
 }

 .pt-table td:first-child {
     text-align: left;
 }

 .pt-table tr:last-child td {
     border: none;
 }

 .pt-table tr:hover td {
     background: rgba(0, 255, 255, .02);
 }

 .pt-disc-cell {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .pt-disc-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .pt-disc-name {
     color: #00ffff;
     font-size: 13px;
     letter-spacing: .5px;
 }

 .pt-time {
     font-family: 'Orbitron', sans-serif;
     font-size: 13px;
     color: rgba(0, 255, 255, .8);
 }

 .pt-cor {
     color: #00ff88;
 }

 .pt-err {
     color: #ff6b6b;
 }

 .pt-tot {
     color: rgba(0, 255, 255, .6);
 }

 .pt-footer {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 20px;
     padding: 10px 14px;
     border-top: 1px solid rgba(0, 255, 255, .1);
     font-size: 11px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
     flex-wrap: wrap;
 }

 .pt-footer-val {
     font-family: 'Orbitron', sans-serif;
     font-size: 13px;
     color: #00ffff;
     margin-left: 4px;
 }

 /* badge sessão ativa no timer */
 .sess-badge {
     display: none;
     align-items: center;
     gap: 10px;
     padding: 10px 20px;
     border: 1px solid rgba(0, 255, 255, .2);
     background: rgba(0, 255, 255, .04);
     text-align: left;
     max-width: 90vw;
 }

 .sess-badge.show {
     display: flex;
 }

 .sess-badge-dot {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: #00ffff;
     animation: blink 1s step-end infinite;
     flex-shrink: 0;
 }

 .sess-badge-disc {
     font-size: clamp(11px, 3vw, 13px);
     letter-spacing: 2px;
     color: #00ffff;
 }

 .sess-badge-top {
     font-size: clamp(9px, 2vw, 10px);
     color: rgba(0, 255, 255, .45);
     letter-spacing: 1px;
     margin-top: 3px;
 }

 /* ── EDITAL VERTICALIZADO ── */
 .ed-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
     flex-wrap: wrap;
     gap: 10px;
 }

 .ed-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 4px;
     color: #00ffff;
     text-shadow: 0 0 10px rgba(0, 255, 255, .3);
 }

 .ed-btns {
     display: flex;
     gap: 8px;
 }

 .ed-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .35);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     letter-spacing: 2px;
     padding: 7px 14px;
     cursor: pointer;
     transition: all .2s;
 }

 .ed-btn:hover {
     background: rgba(0, 255, 255, .08);
     box-shadow: 0 0 10px rgba(0, 255, 255, .2);
 }

 .ed-btn.pdf {
     border-color: rgba(255, 165, 0, .3);
     color: rgba(255, 165, 0, .6);
     position: relative;
 }

 .ed-btn.pdf:hover {
     background: rgba(255, 165, 0, .05);
 }

 .ed-soon {
     position: absolute;
     top: -8px;
     right: -8px;
     font-size: 11px;
     background: rgba(255, 165, 0, .2);
     border: 1px solid rgba(255, 165, 0, .4);
     color: #ffa500;
     padding: 1px 5px;
     letter-spacing: 1px;
 }

 .prog-geral-wrap {
     background: rgba(0, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .12);
     padding: 14px 16px;
     margin-bottom: 14px;
 }

 .prog-geral-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
 }

 .prog-geral-label {
     font-size: 11px;
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .45);
 }

 .prog-geral-info {
     font-size: 11px;
     color: rgba(0, 255, 255, .35);
     letter-spacing: 1px;
 }

 .prog-geral-pct {
     font-family: 'Orbitron', sans-serif;
     font-size: 20px;
     color: #00ffff;
 }

 .prog-bar-geral {
     flex: 1;
     height: 5px;
     background: rgba(0, 255, 255, .08);
     overflow: hidden;
 }

 .prog-bar-geral-fill {
     height: 100%;
     background: linear-gradient(90deg, #00ffff, #00ff88);
     transition: width .5s;
 }

 .prog-bar-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .disc {
     border: 1px solid rgba(0, 255, 255, .15);
     margin-bottom: 8px;
     overflow: hidden;
 }

 .disc-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 11px 14px;
     cursor: pointer;
     background: rgba(0, 255, 255, .04);
     transition: background .2s;
     gap: 10px;
 }

 .disc-header:hover {
     background: rgba(0, 255, 255, .08);
 }

 .disc-left {
     display: flex;
     align-items: center;
     gap: 10px;
     flex: 1;
 }

 .disc-color-bar {
     width: 3px;
     height: 26px;
     border-radius: 2px;
     flex-shrink: 0;
 }

 .disc-name {
     font-size: 13px;
     letter-spacing: 1px;
     color: #00ffff;
 }

 .disc-right {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .disc-mini-bar {
     width: 70px;
     height: 3px;
     background: rgba(0, 255, 255, .1);
 }

 .disc-mini-fill {
     height: 100%;
     transition: width .5s;
 }

 .disc-pct-badge {
     font-size: 12px;
     padding: 2px 7px;
     letter-spacing: 1px;
 }

 .disc-arr {
     font-size: 12px;
     color: rgba(0, 255, 255, .4);
     transition: transform .2s;
 }

 .disc-open .disc-arr {
     transform: rotate(180deg);
 }

 .disc-body {
     display: none;
 }

 .disc-open .disc-body {
     display: block;
 }

 .top-table {
     width: 100%;
     border-collapse: collapse;
 }

 .top-table th {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .35);
     padding: 7px 12px;
     text-align: center;
     border-bottom: 1px solid rgba(0, 255, 255, .08);
     background: rgba(0, 0, 0, .3);
 }

 .top-table th:nth-child(2) {
     text-align: left;
 }

 .top-table td {
     padding: 8px 12px;
     border-bottom: 1px solid rgba(0, 255, 255, .05);
     font-size: 12px;
     text-align: center;
     vertical-align: middle;
 }

 .top-table tr:last-child td {
     border-bottom: none;
 }

 .top-table tr:hover td {
     background: rgba(0, 255, 255, .02);
 }

 .t-chk {
     width: 14px;
     height: 14px;
     border: 1px solid rgba(0, 255, 255, .3);
     background: transparent;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     transition: all .2s;
 }

 .t-chk.done {
     background: rgba(0, 255, 136, .15);
     border-color: #00ff88;
     color: #00ff88;
 }

 .t-nm {
     text-align: left !important;
     color: rgba(0, 255, 255, .75);
 }

 .t-nm.done {
     color: rgba(0, 255, 255, .3);
     text-decoration: line-through;
 }

 .t-g {
     color: #00ff88;
 }

 .t-r {
     color: #ff6b6b;
 }

 .t-tot {
     color: rgba(0, 255, 255, .6);
 }

 .t-pct {
     display: inline-block;
     padding: 2px 6px;
     font-size: 11px;
     font-family: 'Orbitron', sans-serif;
 }

 .t-pct.high {
     background: rgba(0, 255, 136, .12);
     border: 1px solid rgba(0, 255, 136, .3);
     color: #00ff88;
 }

 .t-pct.mid {
     background: rgba(255, 165, 0, .1);
     border: 1px solid rgba(255, 165, 0, .3);
     color: #ffa500;
 }

 .t-pct.low {
     background: rgba(255, 107, 107, .1);
     border: 1px solid rgba(255, 107, 107, .3);
     color: #ff6b6b;
 }

 .t-pct.zero {
     color: rgba(0, 255, 255, .25);
 }

 .t-date {
     color: rgba(0, 255, 255, .3);
     font-size: 11px;
 }

 .t-del {
     background: transparent;
     border: none;
     color: rgba(255, 107, 107, .3);
     cursor: pointer;
     font-size: 12px;
     padding: 0 4px;
 }

 .t-del:hover {
     color: #ff6b6b;
 }

 .disc-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 9px 14px;
     background: rgba(0, 0, 0, .25);
     border-top: 1px solid rgba(0, 255, 255, .07);
     flex-wrap: wrap;
     gap: 8px;
 }

 .disc-total {
     display: flex;
     gap: 12px;
     font-size: 12px;
     align-items: center;
 }

 .disc-total-label {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .3);
 }

 .disc-prog-wrap {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .disc-prog-label {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .3);
 }

 .disc-prog-bar {
     width: 100px;
     height: 4px;
     background: rgba(0, 255, 255, .08);
 }

 .disc-prog-fill {
     height: 100%;
     transition: width .5s;
 }

 .disc-prog-pct {
     font-size: 11px;
     letter-spacing: 1px;
 }

 .disc-actions {
     display: flex;
     gap: 6px;
 }

 .disc-action-btn {
     background: transparent;
     border: none;
     color: rgba(0, 255, 255, .3);
     font-size: 13px;
     cursor: pointer;
     padding: 2px 6px;
     transition: color .2s;
 }

 .disc-action-btn:hover {
     color: #00ffff;
 }

 .disc-action-btn.del:hover {
     color: #ff6b6b;
 }

 .btn-add-top {
     background: transparent;
     border: 1px dashed rgba(0, 255, 255, .18);
     color: rgba(0, 255, 255, .35);
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     letter-spacing: 1px;
     padding: 7px 14px;
     cursor: pointer;
     width: 100%;
     transition: all .2s;
 }

 .btn-add-top:hover {
     border-color: rgba(0, 255, 255, .4);
     color: #00ffff;
 }

 .ed-empty {
     text-align: center;
     padding: 40px 20px;
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .25);
 }

 /* CONFIRM MODAL CUSTOMIZADO */
 .confirm-overlay {
     position: fixed;
     inset: 0;
     z-index: 900;
     background: rgba(0, 0, 0, .7);
     backdrop-filter: blur(6px);
     display: none;
     align-items: center;
     justify-content: center;
 }

 .confirm-overlay.show {
     display: flex;
 }

 .confirm-box {
     position: relative;
     width: 100%;
     max-width: 320px;
     background: rgba(0, 3, 10, .99);
     border: 1px solid rgba(0, 255, 255, .25);
     padding: 24px 22px 20px;
     animation: modalPop .2s ease;
 }

 .confirm-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1.5px;
     background: linear-gradient(90deg, transparent, #00ffff, transparent);
 }

 .confirm-icon {
     text-align: center;
     font-size: 28px;
     margin-bottom: 10px;
 }

 .confirm-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 13px;
     letter-spacing: 3px;
     color: #00ffff;
     text-align: center;
     margin-bottom: 8px;
 }

 .confirm-msg {
     font-size: 13px;
     color: rgba(0, 255, 255, .6);
     text-align: center;
     letter-spacing: 1px;
     line-height: 1.6;
     margin-bottom: 18px;
 }

 .confirm-btns {
     display: flex;
     gap: 8px;
 }

 .confirm-btn {
     flex: 1;
     padding: 10px;
     background: transparent;
     font-family: 'Share Tech Mono', monospace;
     font-size: 12px;
     letter-spacing: 2px;
     cursor: pointer;
     transition: all .2s;
     border: 1px solid rgba(0, 255, 255, .4);
     color: #00ffff;
 }

 .confirm-btn:hover {
     background: rgba(0, 255, 255, .08);
     box-shadow: 0 0 10px rgba(0, 255, 255, .2);
 }

 .confirm-btn.cancel {
     border-color: rgba(206, 209, 14, 0.863);
     color: rgba(216, 219, 14, 0.993);
 }

 .confirm-btn.cancel:hover {
     background: rgba(255, 107, 107, .06);
     color: #ff6b6b;
 }

 /* MODAIS DO EDITAL */
 .ed-overlay {
     position: fixed;
     inset: 0;
     z-index: 600;
     background: rgba(0, 0, 0, .65);
     backdrop-filter: blur(6px);
     display: none;
     align-items: center;
     justify-content: center;
 }

 .ed-overlay.show {
     display: flex;
 }

 .ed-modal-wrap {
     position: relative;
     width: 100%;
     max-width: 340px;
 }

 .ed-modal-canvas {
     position: absolute;
     inset: -1px;
     pointer-events: none;
     z-index: 2;
 }

 .ed-modal {
     position: relative;
     z-index: 1;
     background: rgba(0, 3, 10, .99);
     border: 1px solid rgba(0, 255, 255, .2);
     padding: 22px 20px 18px;
 }

 .ed-modal-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 13px;
     letter-spacing: 4px;
     color: #00ffff;
     text-align: center;
     margin-bottom: 16px;
 }

 .ed-modal-close {
     position: absolute;
     top: 10px;
     right: 12px;
     background: none;
     border: none;
     color: rgba(0, 255, 255, .4);
     font-size: 15px;
     cursor: pointer;
 }

 .ed-modal-close:hover {
     color: #ff6b6b;
 }

 .ed-field {
     margin-bottom: 12px;
 }

 .ed-label {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
     margin-bottom: 4px;
 }

 .ed-input {
     width: 100%;
     background: rgba(0, 5, 10, .95);
     border: 1px solid rgba(0, 255, 255, .18);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 12px;
     padding: 9px 10px;
     outline: none;
     transition: border-color .2s;
 }

 .ed-input:focus {
     border-color: rgba(0, 255, 255, .6);
 }

 .ed-input::placeholder {
     color: rgba(0, 255, 255, .18);
 }

 .ed-input option {
     background: #000d10;
     color: #00ffff;
 }

 select.q-input option {
     background: #000d10;
     color: #00ffff;
 }

 select.q-input {
     background: rgba(0, 5, 10, .95);
 }

 .ed-colors {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 6px;
 }

 .ed-color-opt {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid transparent;
     transition: all .2s;
 }

 .ed-color-opt.sel {
     border-color: #fff;
     transform: scale(1.2);
 }

 .ed-modal-btns {
     display: flex;
     gap: 8px;
     margin-top: 14px;
 }

 .ed-modal-btn {
     flex: 1;
     padding: 10px;
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .4);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     letter-spacing: 2px;
     cursor: pointer;
     transition: all .2s;
 }

 .ed-modal-btn:hover {
     background: rgba(0, 255, 242, 0.08);
 }

 .ed-modal-btn.yellow {
     border-color: rgba(255, 0, 0, 0.39);
     color: rgba(255, 0, 0, 0.582);
 }

 .ed-modal-btn.yellow:hover {
     background: rgba(255, 0, 0, 0.233);
 }

 /* ── RELATÓRIOS ── */
 .rel-periodo-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .2);
     color: rgba(0, 255, 255, .45);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 6px 12px;
     cursor: pointer;
     transition: all .2s;
 }

 .rel-periodo-btn:hover {
     border-color: rgba(0, 255, 255, .5);
     color: #00ffff;
 }

 .rel-periodo-btn.active {
     border-color: #00ffff;
     color: #00ffff;
     background: rgba(0, 255, 255, .08);
 }

 .rel-bar-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     flex: 1;
     gap: 4px;
 }

 .rel-bar {
     width: 100%;
     background: rgba(0, 255, 255, .08);
     position: relative;
     min-height: 4px;
     transition: height .5s ease;
     border-radius: 1px 1px 0 0;
 }

 .rel-bar-fill {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(180deg, #00ffff, rgba(0, 255, 255, .4));
     transition: height .5s ease;
     border-radius: 1px 1px 0 0;
 }

 .rel-bar-val {
     font-size: 10px;
     color: rgba(0, 255, 255, .6);
     font-family: 'Orbitron', sans-serif;
 }

 .rel-bar-label {
     font-size: 10px;
     color: rgba(0, 255, 255, .4);
     letter-spacing: 1px;
 }

 .rel-disc-row {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 0;
     border-bottom: 1px solid rgba(0, 255, 255, .06);
 }

 .rel-disc-row:last-child {
     border: none;
 }

 .rel-disc-bar-wrap {
     flex: 1;
     height: 6px;
     background: rgba(0, 255, 255, .08);
     overflow: hidden;
 }

 .rel-disc-bar-fill {
     height: 100%;
     transition: width .6s ease;
 }

 .rel-comp-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 0;
     border-bottom: 1px solid rgba(0, 255, 255, .06);
 }

 .rel-comp-row:last-child {
     border: none;
 }

 .rel-arrow-up {
     color: #00ff88;
     font-size: 12px;
 }

 .rel-arrow-down {
     color: #ff6b6b;
     font-size: 12px;
 }

 /* ── RESPONSIVIDADE MOBILE ── */
 @media(max-width:768px) {

     /* PLANO */
     #planoCicloView {
         flex-direction: column !important;
     }

     #cicloPizzaSvg {
         width: min(160px, 50vw) !important;
         height: min(160px, 50vw) !important;
     }

     .plano-topico {
         flex-wrap: wrap;
         gap: 8px;
     }

     .pt-tempo {
         font-size: 10px;
     }

     .pt-btn {
         padding: 5px 10px;
         font-size: 9px;
     }

     #timerGuiadoOverlay svg {
         width: min(240px, 60vw) !important;
         height: min(240px, 60vw) !important;
     }

     .dia-row-item {
         gap: 6px;
     }

     .dia-row-btn {
         min-width: 36px;
         padding: 4px 6px;
         font-size: 9px;
     }

     /* CONFIG PLANO */
     .ed-modal {
         max-height: 90vh;
         overflow-y: auto;
     }


     /* NAV */
     .nav-bar {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
         flex-wrap: nowrap;
     }

     .nav-bar::-webkit-scrollbar {
         display: none;
     }


     /* USER BAR */
     .user-bar {
         padding: 12px;
     }

     .prova-name {
         max-width: 80px;
         font-size: 11px;
     }

     .user-name {
         font-size: 12px;
     }

     /* CARDS */
     .cards-row {
         grid-template-columns: 1fr 1fr;
         gap: 8px;
     }

     .card {
         padding: 12px 10px;
     }

     .card-val {
         font-size: clamp(16px, 5vw, 26px);
     }

     /* TABELAS - scroll horizontal */
     .top-table,
     .pt-table,
     .q-history-table {
         display: block;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         white-space: nowrap;
     }

     /* EDITAL */
     .disc-header {
         padding: 10px 12px;
         flex-wrap: nowrap;
     }

     .disc-name {
         font-size: 11px;
     }

     .disc-mini-bar {
         display: none;
     }

     .disc-right {
         gap: 4px;
     }

     /* MODAIS */
     .ed-modal-wrap {
         max-width: 94vw !important;
     }

     .ed-modal {
         padding: 18px 14px 14px;
     }

     .confirm-box {
         max-width: 92vw;
         padding: 20px 16px;
     }

     .profile-modal-wrap {
         max-width: 92vw !important;
     }

     /* TIMER FS */
     .timer-fullscreen {
         padding: 10px;
     }

     .sess-badge {
         padding: 6px 12px;
         max-width: 90vw;
     }

     .ctrl-btn {
         padding: 10px 14px;
         font-size: 11px;
     }

     /* HEADER */
     .sys-title {
         letter-spacing: clamp(4px, 2vw, 12px);
     }

     /* QUESTOES FORM */
     .q-row {
         flex-direction: column;
         gap: 8px;
     }

     .q-field {
         width: 100%;
     }
 }

 @media(max-width:480px) {
     .cards-row {
         grid-template-columns: 1fr 1fr;
     }

     .header {
         padding: 32px 0 16px;
     }

     .prova-name {
         display: none;
     }

     /* PLANO mobile pequeno */
     #cicloPizzaSvg {
         width: 140px !important;
         height: 140px !important;
     }

     .plano-topico {
         flex-direction: column;
         align-items: flex-start;
     }

     .pt-btn {
         width: 100%;
         text-align: center;
         padding: 8px;
     }

     #btnToggleModo {
         font-size: 9px;
         padding: 6px 10px;
     }

     /* CONFIG PLANO */
     #configPesoDiscs input[type=range] {
         width: 70px;
     }

     .dia-row-btn {
         font-size: 8px;
         min-width: 30px;
     }
 }

 @media(max-width:360px) {
     .cards-row {
         grid-template-columns: 1fr;
     }

     .user-name {
         display: none;
     }
 }

 /* SAFE AREA iOS */
 @supports(padding:env(safe-area-inset-top)) {
     .timer-fullscreen {
         padding-top: env(safe-area-inset-top);
         padding-bottom: env(safe-area-inset-bottom);
     }

     nav {
         padding-top: calc(12px + env(safe-area-inset-top));
     }
 }

 /* ── FRASE DO DIA ── */
 .quote-card {
     background: rgba(0, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .12);
     border-left: 3px solid rgba(0, 255, 255, .4);
     padding: 14px 18px;
     margin-top: 14px;
     position: relative;
     overflow: hidden;
 }

 .quote-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, #00ffff, transparent);
     opacity: .4;
 }

 .quote-label {
     font-size: 12px;
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .35);
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .quote-label::before {
     content: '✦';
     color: rgba(0, 255, 255, .3);
     font-size: 12px;
 }

 .quote-text {
     font-size: 13px;
     color: rgba(220, 240, 255, .85);
     letter-spacing: 1px;
     line-height: 1.7;
     font-style: italic;
 }

 .quote-author {
     font-size: 12px;
     color: rgba(255, 255, 255, .35);
     letter-spacing: 2px;
     margin-top: 8px;
 }

 .quote-loading {
     font-size: 12px;
     color: rgba(0, 255, 255, .3);
     letter-spacing: 2px;
     animation: blink 1.2s step-end infinite;
 }

 /* ── FLOATING TIMER ── */
 .timer-fab {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 50;
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: rgba(0, 3, 10, .95);
     border: 1px solid rgba(0, 255, 255, .4);
     box-shadow: 0 0 16px rgba(0, 255, 255, .25);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all .2s;
     font-size: 22px;
 }

 .timer-fab:hover {
     border-color: #00ffff;
     box-shadow: 0 0 24px rgba(0, 255, 255, .4);
     transform: scale(1.08);
 }

 .timer-fab.running {
     border-color: #00ffff;
     box-shadow: 0 0 20px rgba(0, 255, 255, .5);
     animation: fabPulse 2s ease-in-out infinite;
 }

 @keyframes fabPulse {

     0%,
     100% {
         box-shadow: 0 0 16px rgba(0, 255, 255, .3);
     }

     50% {
         box-shadow: 0 0 28px rgba(0, 255, 255, .6);
     }
 }

 /* mini timer bolinho */
 .timer-mini {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 50;
     pointer-events: auto;
     display: none;
     align-items: center;
     gap: 8px;
     background: rgba(0, 3, 10, .97);
     border: 1px solid rgba(0, 255, 255, .35);
     box-shadow: 0 0 16px rgba(0, 255, 255, .2);
     padding: 8px 14px 8px 10px;
     cursor: pointer;
     transition: all .2s;
 }

 .timer-mini:hover {
     border-color: #00ffff;
     box-shadow: 0 0 20px rgba(0, 255, 255, .35);
 }

 @keyframes timerPulse {
     0% {
         box-shadow: 0 0 8px rgba(0, 255, 255, .2), 0 0 0 0 rgba(0, 255, 255, .3);
     }

     50% {
         box-shadow: 0 0 14px rgba(0, 255, 255, .4), 0 0 12px 4px rgba(0, 255, 255, .1);
     }

     100% {
         box-shadow: 0 0 8px rgba(0, 255, 255, .2), 0 0 0 0 rgba(0, 255, 255, 0);
     }
 }

 @keyframes timerPulseRed {
     0% {
         box-shadow: 0 0 8px rgba(255, 107, 107, .2), 0 0 0 0 rgba(255, 107, 107, .3);
     }

     50% {
         box-shadow: 0 0 14px rgba(255, 107, 107, .4), 0 0 12px 4px rgba(255, 107, 107, .1);
     }

     100% {
         box-shadow: 0 0 8px rgba(255, 107, 107, .2), 0 0 0 0 rgba(255, 107, 107, 0);
     }
 }

 .timer-mini.show {
     animation: timerPulse 2s ease-in-out infinite;
 }

 .timer-mini.show.pausa {
     animation: timerPulseRed 2s ease-in-out infinite;
 }

 .timer-mini.show {
     display: flex;
 }

 .ed-overlay.show~* .timer-mini,

 .timer-mini-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #00ffff;
     animation: blink 1s step-end infinite;
     flex-shrink: 0;
 }

 .timer-mini-dot.paused {
     background: rgba(0, 255, 255, .3);
     animation: none;
 }

 .timer-mini-time {
     font-family: 'Orbitron', sans-serif;
     font-size: 16px;
     color: #00ffff;
     letter-spacing: 2px;
 }

 .timer-mini-mode {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .45);
 }

 /* tela cheia do timer */
 .timer-fullscreen {
     position: fixed;
     inset: 0;
     z-index: 350;
     background: rgba(0, 0, 0, .97);
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;
     backdrop-filter: blur(2px);
 }

 .timer-fullscreen.show {
     display: flex;
 }

 .timer-fs-header {
     position: absolute;
     top: 20px;
     left: 0;
     right: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 24px;
 }

 .timer-fs-title {
     font-family: 'Orbitron', sans-serif;
     font-size: clamp(14px, 3vw, 20px);
     font-weight: 900;
     letter-spacing: 6px;
     color: #00ffff;
     text-shadow: 0 0 16px #00ffff;
 }

 .timer-fs-actions {
     display: flex;
     gap: 10px;
 }

 .timer-fs-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .25);
     color: rgba(0, 255, 255, .6);
     font-family: 'Share Tech Mono', monospace;
     font-size: 12px;
     letter-spacing: 2px;
     padding: 6px 14px;
     cursor: pointer;
     transition: all .2s;
 }

 .timer-fs-btn:hover {
     border-color: #00ffff;
     color: #00ffff;
 }

 .timer-fs-btn.close {
     border-color: rgba(255, 107, 107, .3);
     color: rgba(255, 107, 107, .6);
 }

 .timer-fs-btn.close:hover {
     border-color: #ff6b6b;
     color: #ff6b6b;
 }

 /* PROVA CARD */
 .prova-bar {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     position: relative;
 }

 .prova-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 5px 12px;
     background: transparent;
     border: none;
     cursor: pointer;
     position: relative;
 }

 .prova-chip:hover .prova-name {
     color: #00ffff;
 }

 .prova-icon {
     font-size: 18px;
     opacity: .8;
 }

 .prova-info {
     display: flex;
     flex-direction: column;
 }

 .prova-name {
     font-size: 15px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .7);
     transition: color .2s;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 160px;
 }

 .prova-days {
     font-family: 'Orbitron', sans-serif;
     font-size: 15px;
     color: #ffd700;
     letter-spacing: 1px;
     text-shadow: 0 0 8px rgba(255, 215, 0, .4);
 }

 .prova-days span {
     font-size: 12px;
     letter-spacing: 1px;
     color: rgba(255, 215, 0, .6);
     font-family: 'Share Tech Mono', monospace;
 }

 .prova-edit {
     font-size: 11px;
     color: rgba(0, 255, 255, .3);
     cursor: pointer;
     padding: 2px 4px;
 }

 .prova-edit:hover {
     color: #00ffff;
 }

 /* PROVA MODAL */
 .prova-overlay {
     position: fixed;
     inset: 0;
     z-index: 600;
     background: rgba(0, 0, 0, .65);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     display: none;
     align-items: center;
     justify-content: center;
 }

 .prova-overlay.show {
     display: flex;
 }

 .prova-modal-wrap {
     position: relative;
     width: 100%;
     max-width: 290px;
 }

 .prova-modal-canvas {
     position: absolute;
     inset: -1px;
     pointer-events: none;
     z-index: 2;
 }

 .prova-modal {
     position: relative;
     z-index: 1;
     width: 100%;
     background: rgba(0, 3, 10, .99);
     border: 1px solid rgba(0, 255, 255, .2);
     padding: 22px 20px 18px;
     animation: modalPop .22s ease;
 }

 .prova-modal::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1.5px;
     background: linear-gradient(90deg, transparent, #ffd700, transparent);
 }

 .prova-modal-close {
     position: absolute;
     top: 10px;
     right: 12px;
     background: none;
     border: none;
     color: rgba(0, 255, 255, .4);
     font-size: 16px;
     cursor: pointer;
     font-family: 'Share Tech Mono', monospace;
 }

 .prova-modal-close:hover {
     color: #ff6b6b;
 }

 .prova-modal-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 13px;
     letter-spacing: 4px;
     color: #ffd700;
     text-align: center;
     margin-bottom: 16px;
     text-shadow: 0 0 10px rgba(255, 215, 0, .3);
 }

 /* MODAL PERFIL */
 .profile-overlay {
     position: fixed;
     inset: 0;
     z-index: 600;
     background: rgba(0, 0, 0, .65);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     display: none;
     align-items: center;
     justify-content: center;
 }

 .profile-overlay.show {
     display: flex;
 }

 .profile-modal-wrap {
     position: relative;
     width: 100%;
     max-width: 340px;
 }

 .profile-modal {
     position: relative;
     z-index: 1;
     width: 100%;
     background: rgba(0, 3, 10, .99);
     border: 1px solid rgba(0, 255, 255, .2);
     padding: 24px 20px 20px;
     animation: modalPop .22s ease;
     overflow: hidden;
 }

 .profile-modal-canvas {
     position: absolute;
     inset: -1px;
     pointer-events: none;
     z-index: 2;
 }

 @keyframes modalPop {
     from {
         opacity: 0;
         transform: scale(.95)
     }

     to {
         opacity: 1;
         transform: scale(1)
     }
 }

 .pm-close {
     position: absolute;
     top: 10px;
     right: 12px;
     background: none;
     border: none;
     color: rgba(0, 255, 255, .4);
     font-size: 16px;
     cursor: pointer;
     font-family: 'Share Tech Mono', monospace;
 }

 .pm-close:hover {
     color: #ff6b6b;
 }

 .pm-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 13px;
     letter-spacing: 4px;
     color: #00ffff;
     text-align: center;
     margin-bottom: 16px;
 }

 .pm-av-wrap {
     text-align: center;
     margin-bottom: 16px;
 }

 .pm-av {
     width: 68px;
     height: 68px;
     border-radius: 50%;
     border: 2px solid rgba(0, 255, 255, .45);
     background: rgba(0, 255, 255, .08);
     margin: 0 auto 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: border-color .2s;
 }

 .pm-av:hover {
     border-color: #00ffff;
 }

 .pm-av:hover .pm-av-h {
     opacity: 1;
 }

 .pm-av-h {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .55);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     letter-spacing: 1px;
     color: #00ffff;
     opacity: 0;
     transition: opacity .2s;
 }

 .pm-av img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }

 .pm-av-hint {
     font-size: 12px;
     color: rgba(0, 255, 255, .3);
     letter-spacing: 1px;
     text-align: center;
     white-space: nowrap;
     width: 100%;
 }

 .pm-field {
     margin-bottom: 10px;
 }

 .pm-label {
     font-size: 12px;
     white-space: nowrap;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
     margin-bottom: 3px;
 }

 .pm-input {
     width: 100%;
     background: rgba(0, 255, 255, .04);
     border: 1px solid rgba(0, 255, 255, .18);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 12px;
     padding: 8px 10px;
     outline: none;
     transition: border-color .2s;
 }

 .pm-input:focus {
     border-color: rgba(0, 255, 255, .6);
     box-shadow: 0 0 6px rgba(0, 255, 255, .1);
 }

 .pm-input::placeholder {
     color: rgba(0, 255, 255, .18);
 }

 .pm-input[readonly] {
     color: rgba(0, 255, 255, .3);
     background: rgba(0, 0, 0, .15);
     cursor: not-allowed;
 }

 .pm-btns {
     display: flex;
     gap: 8px;
     margin-top: 14px;
 }

 .pm-btn {
     flex: 1;
     padding: 10px;
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .4);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     letter-spacing: 2px;
     cursor: pointer;
     transition: all .2s;
 }

 .pm-btn:hover {
     background: rgba(0, 255, 255, .08);
     box-shadow: 0 0 8px rgba(0, 255, 255, .2);
 }

 .pm-btn.red {
     border-color: rgba(255, 107, 107, .35);
     color: rgba(255, 107, 107, .65);
 }

 .pm-btn.red:hover {
     background: rgba(255, 107, 107, .06);
     color: #ff6b6b;
 }

 .pm-btn.yellow {
     border-color: rgba(255, 215, 0, .4);
     color: rgba(255, 215, 0, .8);
 }

 .pm-btn.yellow:hover {
     background: rgba(255, 215, 0, .06);
     color: #ffd700;
     box-shadow: 0 0 8px rgba(255, 215, 0, .2);
 }

 .pm-toast {
     position: fixed;
     bottom: 24px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 255, 136, .1);
     border: 1px solid rgba(0, 255, 136, .4);
     color: #00ff88;
     font-size: 12px;
     letter-spacing: 2px;
     padding: 8px 18px;
     z-index: 700;
     opacity: 0;
     transition: opacity .3s;
     pointer-events: none;
 }

 .pm-toast.show {
     opacity: 1;
 }

 .sync-bar {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 11px;
     letter-spacing: 2px;
     margin: 0;
     flex-wrap: wrap;
     width: 100%;
     text-align: center;
     padding: 6px 0;
 }

 .sync-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: rgba(0, 255, 255, .2);
     flex-shrink: 0;
 }

 .sync-dot.ok {
     background: #00ff88;
     box-shadow: 0 0 6px rgba(0, 255, 136, .5);
 }

 .sync-dot.err {
     background: #ff6b6b;
 }

 .sync-dot.loading {
     background: #ffa500;
     animation: blink 0.8s step-end infinite;
 }

 .sync-text {
     color: rgba(0, 255, 255, .4);
 }

 .nav {
     display: flex;
     gap: 6px;
     margin-top: 40px;
     margin-bottom: 20px;
     flex-wrap: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     width: 100%;
     padding: 6px 0 8px;
     background: transparent;
 }

 .nav::-webkit-scrollbar {
     display: none;
 }

 .dia-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .15);
     color: rgba(0, 255, 255, .35);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 8px 10px;
     cursor: pointer;
     transition: all .2s;
     border-radius: 4px;
 }

 .dia-btn.active {
     background: rgba(0, 255, 255, .1);
     border-color: rgba(0, 255, 255, .5);
     color: #00ffff;
 }

 .dia-row-btn {
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 5px 8px;
     min-width: 44px;
     cursor: pointer;
     transition: all .2s;
     text-align: center;
 }

 .dia-row-btn:hover {
     background: rgba(0, 255, 255, .15) !important;
     border-color: rgba(0, 255, 255, .7) !important;
     color: #00ffff !important;
     box-shadow: 0 0 8px rgba(0, 255, 255, .15);
 }

 .dia-row-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 7px 10px;
     border: 1px solid rgba(0, 255, 255, .06);
     transition: all .2s;
 }

 .dia-row-item.ativo {
     border-color: rgba(0, 255, 255, .2);
     background: rgba(0, 255, 255, .03);
 }

 .dia-row-item:hover {
     border-color: rgba(0, 255, 255, .15);
 }

 .plano-topico {
     background: rgba(0, 255, 255, .02);
     border: 1px solid rgba(0, 255, 255, .1);
     padding: 14px 16px;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 12px;
     transition: all .2s;
 }

 .plano-topico.concluido-hoje {
     border-color: rgba(0, 255, 136, .2);
     background: rgba(0, 255, 136, .02);
 }

 .plano-topico.concluido-hoje .pt-nome {
     text-decoration: line-through;
     color: rgba(0, 255, 255, .3);
 }

 .pt-check {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     border: 1px solid rgba(0, 255, 255, .3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     flex-shrink: 0;
 }

 .plano-topico.concluido-hoje .pt-check {
     background: rgba(0, 255, 136, .2);
     border-color: #00ff88;
     color: #00ff88;
 }

 .pt-info {
     flex: 1;
     min-width: 0;
 }

 .pt-nome {
     font-size: 13px;
     color: rgba(0, 255, 255, .8);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .pt-disc {
     font-size: 10px;
     color: rgba(0, 255, 255, .35);
     letter-spacing: 1px;
     margin-top: 2px;
 }

 .pt-tempo {
     font-size: 11px;
     color: rgba(0, 255, 255, .5);
     letter-spacing: 1px;
     margin-right: 8px;
     white-space: nowrap;
 }

 .pt-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .25);
     color: rgba(0, 255, 255, .6);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 1px;
     padding: 6px 12px;
     cursor: pointer;
     transition: all .2s;
     white-space: nowrap;
 }

 .pt-btn:hover {
     border-color: #00ffff;
     color: #00ffff;
     background: rgba(0, 255, 255, .08);
 }

 .revisao-item {
     background: rgba(255, 200, 0, .02);
     border: 1px solid rgba(255, 200, 0, .15);
     padding: 12px 16px;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .questao-card {
     background: rgba(0, 255, 255, .02);
     border: 1px solid rgba(0, 255, 255, .1);
     padding: 16px;
     margin-bottom: 12px;
 }

 .questao-alt {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 12px 14px;
     margin: 8px 0;
     cursor: pointer;
     border: 1px solid rgba(0, 255, 255, .1);
     border-radius: 4px;
     transition: all .2s;
     background: rgba(0, 255, 255, .02);
 }

 .questao-alt:hover {
     background: rgba(0, 255, 255, .07);
     border-color: rgba(0, 255, 255, .35);
     transform: translateX(2px);
 }

 .questao-alt.selecionada {
     background: rgba(0, 255, 255, .08);
     border-color: rgba(0, 255, 255, .4);
 }

 .questao-alt.correta {
     background: rgba(0, 255, 136, .08);
     border-color: #00ff88;
     color: #00ff88;
     cursor: default;
 }

 .questao-alt.correta:hover {
     transform: none;
     background: rgba(0, 255, 136, .08);
     border-color: #00ff88;
 }

 .questao-alt.errada {
     background: rgba(255, 107, 107, .08);
     border-color: rgba(255, 107, 107, .4);
     color: rgba(255, 107, 107, .8);
     cursor: default;
 }

 .questao-alt.errada:hover {
     transform: none;
     background: rgba(255, 107, 107, .08);
     border-color: rgba(255, 107, 107, .4);
 }

 .questao-alt.eliminada {
     opacity: 0.35;
     text-decoration: line-through;
     cursor: default;
     border-color: rgba(0,255,255,.05);
 }

 .questao-alt.eliminada:hover {
     transform: none;
     background: transparent;
     border-color: rgba(0,255,255,.05);
 }

 .alt-tesoura {
     font-size: 16px;
     font-weight: 700;
     color: rgba(0,255,255,.2);
     cursor: pointer;
     flex-shrink: 0;
     transition: color .2s;
     padding: 0 6px;
     line-height: 1;
     user-select: none;
 }

 .questao-alt:hover .alt-tesoura {
     color: rgba(0,255,255,.6);
 }

 .questao-alt.eliminada .alt-tesoura {
     color: rgba(255,107,107,.6);
 }

 .rev-btn-1d {
     background: rgba(255, 107, 107, .08);
     border: 1px solid rgba(255, 107, 107, .4);
     color: rgba(255, 107, 107, .8);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 12px 18px;
     cursor: pointer;
     transition: all .2s;
 }

 .rev-btn-1d:hover {
     background: rgba(255, 107, 107, .2);
     border-color: rgba(255, 107, 107, .7);
 }

 .rev-btn-5d {
     background: rgba(255, 200, 0, .08);
     border: 1px solid rgba(255, 200, 0, .4);
     color: rgba(255, 200, 0, .8);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 12px 18px;
     cursor: pointer;
     transition: all .2s;
 }

 .rev-btn-5d:hover {
     background: rgba(255, 200, 0, .2);
     border-color: rgba(255, 200, 0, .7);
 }

 .rev-btn-7d {
     background: rgba(0, 255, 136, .08);
     border: 1px solid rgba(0, 255, 136, .4);
     color: #00ff88;
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 12px 18px;
     cursor: pointer;
     transition: all .2s;
 }

 .rev-btn-7d:hover {
     background: rgba(0, 255, 136, .2);
     border-color: #00ff88;
 }

 .rev-btn-sem {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .2);
     color: rgba(0, 255, 255, .4);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 2px;
     padding: 12px 18px;
     cursor: pointer;
     transition: all .2s;
 }

 .rev-btn-sem:hover {
     background: rgba(0, 255, 255, .08);
     border-color: rgba(0, 255, 255, .4);
     color: rgba(0, 255, 255, .7);
 }

 .alt-letra {
     font-family: 'Orbitron', sans-serif;
     font-size: 11px;
     color: #00ffff;
     min-width: 20px;
     margin-top: 1px;
 }

 .nav-btn {
     background: linear-gradient(180deg, rgba(0, 40, 50, .85) 0%, rgba(0, 20, 28, .95) 100%);
     border: 1px solid rgba(0, 255, 255, .25);
     border-top: 1px solid rgba(0, 255, 255, .45);
     border-radius: 8px;
     color: rgba(0, 255, 255, .55);
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     letter-spacing: 1.5px;
     padding: 10px 8px;
     cursor: pointer;
     transition: all .2s;
     white-space: nowrap;
     flex: 1;
     text-align: center;
     min-width: 0;
     position: relative;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(0, 255, 255, .1);
 }

 .nav-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 10%;
     right: 10%;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(0, 255, 255, .5), transparent);
     opacity: .6;
 }

 .nav-btn:hover {
     color: #00ffff;
     border-color: rgba(0, 255, 255, .5);
     border-top-color: rgba(0, 255, 255, .8);
     background: linear-gradient(180deg, rgba(0, 60, 75, .9) 0%, rgba(0, 30, 40, .95) 100%);
     box-shadow: 0 2px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(0, 255, 255, .2), 0 0 10px rgba(0, 255, 255, .1);
 }

 .nav-btn.active {
     color: #00ffff;
     border-color: rgba(0, 255, 255, .6);
     border-top-color: #00ffff;
     background: linear-gradient(180deg, rgba(0, 70, 90, .95) 0%, rgba(0, 35, 50, .98) 100%);
     box-shadow: 0 2px 14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(0, 255, 255, .35), 0 0 16px rgba(0, 255, 255, .15);
     text-shadow: 0 0 8px rgba(0, 255, 255, .6);
 }

 .panel {
     display: none;
 }

 .panel.active {
     display: block;
 }

 .cards-row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
     gap: 10px;
     margin-bottom: 16px;
 }

 .card {
     background: rgba(0, 255, 255, .04);
     border: 1px solid rgba(0, 255, 255, .2);
     padding: 16px 18px;
     position: relative;
     overflow: hidden;
 }

 .card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, #00ffff, transparent);
     opacity: .5;
 }

 .card-label {
     font-size: clamp(9px, 2vw, 11px);
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
     margin-bottom: 8px;
 }

 .card-val {
     font-family: 'Orbitron', sans-serif;
     font-size: clamp(22px, 5vw, 32px);
     font-weight: 700;
     color: #00ffff;
     line-height: 1;
 }

 .card-val.green {
     color: #00ff88;
     text-shadow: 0 0 10px rgba(0, 255, 136, .4);
 }

 .card-val.red {
     color: #ff6b6b;
     text-shadow: 0 0 10px rgba(255, 107, 107, .4);
 }

 .card-sub {
     font-size: clamp(10px, 2vw, 12px);
     color: rgba(0, 255, 255, .35);
     margin-top: 6px;
 }

 .card-icon {
     position: absolute;
     top: 12px;
     right: 12px;
     font-size: 14px;
     opacity: .3;
 }

 .timer-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: clamp(12px, 3vw, 18px);
 }

 .modes {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .mode-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .3);
     color: rgba(0, 255, 255, .5);
     font-family: 'Share Tech Mono', monospace;
     font-size: clamp(8px, 2.5vw, 10px);
     letter-spacing: clamp(1px, 1vw, 2px);
     padding: 5px clamp(8px, 2vw, 14px);
     cursor: pointer;
     transition: all .2s;
     white-space: nowrap;
 }

 .mode-btn.active,
 .mode-btn:hover {
     background: rgba(0, 255, 255, .1);
     border-color: #00ffff;
     color: #00ffff;
     box-shadow: 0 0 8px rgba(0, 255, 255, .25);
 }

 .timer-ring {
     position: relative;
     width: clamp(240px, 60vw, 400px);
     height: clamp(240px, 60vw, 400px);
 }

 .timer-fullscreen .timer-ring {
     width: clamp(260px, 65vmin, 420px);
     height: clamp(260px, 65vmin, 420px);
 }

 .ring-svg {
     width: 100%;
     height: 100%;
     transform: rotate(-90deg);
     filter: drop-shadow(0 0 6px #00ffff);
 }

 .ring-track {
     fill: none;
     stroke: rgba(0, 255, 255, .1);
     stroke-width: 4;
 }

 .ring-progress {
     fill: none;
     stroke: #00ffff;
     stroke-width: 4;
     stroke-linecap: round;
     transition: stroke-dashoffset .5s linear;
 }

 .ring-accent {
     fill: none;
     stroke: rgba(0, 255, 255, .25);
     stroke-width: 1;
     stroke-dasharray: 4 8;
 }

 .timer-center {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .time-display {
     font-family: 'Orbitron', sans-serif;
     font-size: clamp(44px, 12vw, 72px);
     font-weight: 700;
     color: #00ffff;
     text-shadow: 0 0 16px rgba(0, 255, 255, .8);
     letter-spacing: 2px;
     line-height: 1;
 }

 .timer-fullscreen .time-display {
     font-size: clamp(52px, 14vmin, 88px);
 }

 .time-label {
     font-size: clamp(10px, 2vw, 12px);
     letter-spacing: 4px;
     color: rgba(0, 255, 255, .5);
     margin-top: 6px;
 }

 .pct-label {
     position: absolute;
     top: 6px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 11px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .3);
 }

 .adjust-row {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .adj-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .2);
     color: rgba(0, 255, 255, .6);
     font-family: 'Share Tech Mono', monospace;
     font-size: 18px;
     width: 36px;
     height: 36px;
     cursor: pointer;
     transition: all .15s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .adj-btn:hover {
     border-color: #00ffff;
     color: #00ffff;
     box-shadow: 0 0 8px rgba(0, 255, 255, .3);
 }

 .adj-info {
     text-align: center;
 }

 .adj-label {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
 }

 .adj-val {
     font-family: 'Orbitron', monospace;
     font-size: 16px;
     color: #00ffff;
 }

 .controls {
     display: flex;
     gap: 8px;
     align-items: center;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
 }

 .timer-fullscreen .controls {
     gap: clamp(8px, 2vw, 14px);
     padding: 0 clamp(8px, 2vw, 16px);
 }

 .ctrl-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .35);
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: clamp(10px, 2.5vw, 12px);
     letter-spacing: clamp(1px, 1vw, 2px);
     padding: clamp(10px, 2vw, 12px) clamp(14px, 3vw, 22px);
     cursor: pointer;
     transition: all .2s;
     white-space: nowrap;
 }

 .ctrl-btn:hover {
     border-color: #00ffff;
     box-shadow: 0 0 12px rgba(0, 255, 255, .35);
 }

 .ctrl-btn.primary {
     font-size: clamp(12px, 3vw, 15px);
     padding: clamp(12px, 2vw, 14px) clamp(24px, 5vw, 36px);
     border-width: 2px;
     font-weight: 700;
 }

 .ctrl-btn.primary:hover {
     box-shadow: 0 0 20px rgba(0, 255, 255, .5);
 }

 .status-bar {
     display: flex;
     gap: clamp(10px, 3vw, 20px);
     font-size: clamp(10px, 2vw, 12px);
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .4);
     flex-wrap: wrap;
     justify-content: center;
 }

 .status-item {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .status-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #00ffff;
     animation: blink 1s step-end infinite;
     flex-shrink: 0;
 }

 .status-dot.off {
     background: rgba(0, 255, 255, .2);
     animation: none;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: 0
     }
 }

 @keyframes spin {
     from {
         transform: rotate(0deg)
     }

     to {
         transform: rotate(360deg)
     }
 }

 .sessions-row {
     display: flex;
     gap: 5px;
     margin-top: 4px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .session-dot {
     width: 8px;
     height: 8px;
     border: 1px solid rgba(0, 255, 255, .3);
     border-radius: 50%;
     transition: all .3s;
 }

 .session-dot.done {
     background: #00ffff;
     box-shadow: 0 0 6px rgba(0, 255, 255, .6);
     border-color: #00ffff;
 }

 body.break-mode .time-display {
     color: #ff6b6b;
     text-shadow: 0 0 16px rgba(255, 107, 107, .8);
 }

 body.break-mode .ring-progress {
     stroke: #ff6b6b;
 }

 body.break-mode .ring-svg {
     filter: drop-shadow(0 0 8px #ff6b6b);
 }

 body.done-flash {
     animation: doneFlash .5s ease-in-out 4;
 }

 @keyframes doneFlash {

     0%,
     100% {
         background: #000
     }

     50% {
         background: #001a1a
     }
 }

 .q-form {
     background: rgba(0, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .2);
     padding: clamp(14px, 3vw, 20px);
     margin-bottom: 16px;
     position: relative;
 }

 .q-form::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, #00ffff, transparent);
     opacity: .5;
 }

 .q-form-title {
     font-size: clamp(9px, 2.5vw, 11px);
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .5);
     margin-bottom: 14px;
 }

 .q-row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     gap: 10px;
     margin-bottom: 12px;
 }

 .q-field {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .q-field label {
     font-size: 13px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .55);
     display: flex;
     align-items: center;
     gap: 4px;
     flex-wrap: wrap;
 }

 .auto-badge {
     font-size: 9px;
     background: rgba(0, 255, 136, .12);
     border: 1px solid rgba(0, 255, 136, .4);
     color: #00ff88;
     padding: 1px 4px;
     letter-spacing: 1px;
     white-space: nowrap;
     vertical-align: middle;
 }

 .q-input {
     background: rgba(0, 180, 255, .04);
     border: 1px solid rgba(0, 180, 255, .3);
     color: #00c8ff;
     font-family: 'Share Tech Mono', monospace;
     font-size: clamp(16px, 4vw, 20px);
     padding: 10px 12px;
     width: 100%;
     outline: none;
     transition: all .2s;
 }

 .q-input:focus {
     border-color: #00c8ff;
     box-shadow: 0 0 10px rgba(0, 180, 255, .2);
 }

 .q-input::placeholder {
     color: rgba(0, 180, 255, .2);
 }

 .q-input.green {
     background: rgba(0, 255, 136, .05);
     border-color: rgba(0, 255, 136, .35);
     color: #00ff88;
 }

 .q-input.auto {
     background: rgba(255, 107, 107, .05);
     border-color: rgba(255, 107, 107, .35);
     color: #ff6b6b;
     cursor: default;
 }

 .q-input.auto-zero {
     background: rgba(0, 255, 255, .03);
     border-color: rgba(0, 255, 255, .15);
     color: rgba(0, 255, 255, .3);
     cursor: default;
 }

 .q-input.auto-zero-ok {
     background: rgba(0, 255, 136, .04);
     border-color: rgba(0, 255, 136, .2);
     color: rgba(0, 255, 136, .5);
     cursor: default;
 }

 .preview {
     display: flex;
     gap: 12px;
     align-items: center;
     flex-wrap: wrap;
     border-top: 1px solid rgba(0, 255, 255, .1);
     padding-top: 12px;
     margin-top: 4px;
     opacity: 0;
     transition: opacity .3s;
 }

 .preview-item {
     display: flex;
     flex-direction: column;
     gap: 2px;
     align-items: center;
 }

 .preview-label {
     font-size: 12px;
     letter-spacing: 2px;
     color: rgba(0, 255, 255, .35);
 }

 .preview-val {
     font-family: 'Orbitron', monospace;
     font-size: clamp(13px, 3vw, 16px);
 }

 .preview-val.green {
     color: #00ff88;
 }

 .preview-val.red {
     color: #ff6b6b;
 }

 .preview-val.cyan {
     color: #00ffff;
 }

 .preview-sep {
     color: rgba(0, 255, 255, .2);
     font-size: 18px;
     align-self: center;
 }

 .prog-preview {
     width: 100%;
 }

 .prog-bar-thin {
     height: 6px;
     background: rgba(0, 255, 255, .08);
     overflow: hidden;
     border: 1px solid rgba(0, 255, 255, .1);
 }

 .prog-fill-g {
     height: 100%;
     background: #00ff88;
     transition: width .3s ease;
     float: left;
 }

 .prog-fill-r {
     height: 100%;
     background: #ff6b6b;
     transition: width .3s ease;
     float: left;
 }

 .prog-labels {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: rgba(0, 255, 255, .35);
     margin-top: 4px;
 }

 .hint {
     font-size: clamp(8px, 2vw, 10px);
     color: rgba(0, 255, 255, .25);
     letter-spacing: 1px;
     margin-top: 8px;
     margin-bottom: 8px;
     line-height: 1.5;
 }

 .q-submit {
     width: 100%;
     background: transparent;
     border: 2px solid #00ffff;
     color: #00ffff;
     font-family: 'Share Tech Mono', monospace;
     font-size: clamp(10px, 3vw, 12px);
     letter-spacing: 3px;
     padding: 12px;
     cursor: pointer;
     transition: all .2s;
 }

 .q-submit:hover {
     background: rgba(0, 255, 255, .1);
     box-shadow: 0 0 16px rgba(0, 255, 255, .35);
 }

 .q-submit:disabled {
     opacity: .3;
     cursor: not-allowed;
     border-color: rgba(0, 255, 255, .3);
 }

 .stat-block {
     background: rgba(0, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .15);
     padding: clamp(12px, 3vw, 18px);
     margin-bottom: 14px;
 }

 .stat-block-title {
     font-size: clamp(9px, 2.5vw, 11px);
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .5);
     margin-bottom: 12px;
 }

 .prog-wrap {
     margin-top: 6px;
 }

 .prog-label {
     display: flex;
     justify-content: space-between;
     font-size: clamp(8px, 2vw, 10px);
     color: rgba(0, 255, 255, .4);
     margin-bottom: 4px;
 }

 .prog-bar {
     height: 5px;
     background: rgba(0, 255, 255, .08);
     overflow: hidden;
 }

 .prog-fill {
     height: 100%;
     transition: width .6s ease;
 }

 .prog-fill.g {
     background: #00ff88;
 }

 .prog-fill.r {
     background: #ff6b6b;
 }

 .log-list {
     margin-top: 16px;
 }

 .log-title {
     font-size: clamp(9px, 2.5vw, 11px);
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .5);
     margin-bottom: 10px;
 }

 .log-entry {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(0, 255, 255, .08);
     padding: 10px 0;
     flex-wrap: wrap;
     gap: 6px;
 }

 .log-date {
     font-size: clamp(9px, 2vw, 10px);
     color: rgba(0, 255, 255, .45);
 }

 .log-time-val {
     font-family: 'Orbitron', sans-serif;
     font-size: clamp(11px, 3vw, 13px);
     color: #00ffff;
 }

 .log-sessions {
     font-size: clamp(8px, 2vw, 10px);
     color: rgba(0, 255, 255, .3);
 }

 .log-q {
     font-size: clamp(8px, 2vw, 10px);
     color: #00ff88;
 }

 .log-detail {
     font-size: clamp(9px, 2vw, 10px);
 }

 .log-detail .g {
     color: #00ff88;
 }

 .log-detail .r {
     color: #ff6b6b;
 }

 .del-btn {
     background: transparent;
     border: none;
     color: rgba(255, 107, 107, .35);
     font-size: 14px;
     cursor: pointer;
     padding: 2px 8px;
     transition: color .2s;
 }

 .del-btn:hover {
     color: #ff6b6b;
 }

 .empty {
     font-size: clamp(9px, 2.5vw, 11px);
     color: rgba(0, 255, 255, .2);
     letter-spacing: 2px;
     padding: 20px 0;
     text-align: center;
 }

 .heatmap-wrap {
     background: rgba(0, 255, 255, .03);
     border: 1px solid rgba(0, 255, 255, .15);
     padding: clamp(12px, 3vw, 18px);
 }

 .heatmap-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 12px;
     flex-wrap: wrap;
     gap: 8px;
 }

 .heatmap-title {
     font-size: clamp(9px, 2.5vw, 11px);
     letter-spacing: 3px;
     color: rgba(0, 255, 255, .5);
 }

 .heatmap-stats {
     font-size: clamp(9px, 2vw, 10px);
     color: rgba(0, 255, 255, .4);
     letter-spacing: 2px;
 }

 .heatmap-grid {
     display: flex;
     gap: clamp(2px, 1vw, 4px);
     flex-wrap: wrap;
 }

 .heat-day {
     width: clamp(20px, 6vw, 28px);
     height: clamp(20px, 6vw, 28px);
     border: 1px solid rgba(0, 255, 255, .08);
     background: rgba(0, 255, 255, .02);
     cursor: default;
     transition: border-color .2s;
 }

 .heat-day.future {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, .04);
 }

 .heat-day.missed {
     background: rgba(220, 50, 50, .32);
     border-color: rgba(230, 70, 70, .45);
 }

 .heat-day[data-level="1"] {
     background: rgba(0, 180, 80, .22);
     border-color: rgba(0, 180, 80, .35);
 }

 .heat-day[data-level="2"] {
     background: rgba(0, 200, 90, .42);
     border-color: rgba(0, 200, 90, .55);
 }

 .heat-day[data-level="3"] {
     background: rgba(0, 220, 100, .65);
     border-color: rgba(0, 220, 100, .75);
 }

 .heat-day[data-level="4"] {
     background: #00c864;
     border-color: #00e070;
     box-shadow: 0 0 6px rgba(0, 200, 100, .4);
 }

 .heat-day.today {
     border: 2px solid #ffd700 !important;
     box-shadow: 0 0 8px rgba(255, 215, 0, .35);
 }

 .heat-day:hover {
     border-color: rgba(0, 255, 255, .5) !important;
     z-index: 2;
 }

 .heatmap-footer {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-top: 8px;
     font-size: 12px;
     color: rgba(255, 215, 0, .6);
     letter-spacing: 2px;
     gap: 6px;
 }

 .today-dot {
     width: 10px;
     height: 10px;
     border: 2px solid #ffd700;
     border-radius: 50%;
 }

 .streak-badge {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background: rgba(255, 165, 0, .1);
     border: 1px solid rgba(255, 165, 0, .3);
     padding: 4px 10px;
     font-size: clamp(8px, 2vw, 10px);
     letter-spacing: 2px;
     color: #ffa500;
     margin-top: 6px;
 }

 .no-streak {
     font-size: clamp(8px, 2vw, 10px);
     color: rgba(255, 107, 107, .6);
     letter-spacing: 2px;
     margin-top: 6px;
 }

 .heat-tip {
     position: fixed;
     background: rgba(5, 5, 5, .97);
     border: 1px solid rgba(0, 255, 255, .25);
     padding: 10px 14px;
     pointer-events: none;
     z-index: 999;
     display: none;
     min-width: 160px;
 }

 .heat-tip-date {
     font-family: 'Share Tech Mono', monospace;
     font-size: 13px;
     font-weight: 700;
     color: #00ffff;
     letter-spacing: 1px;
     margin-bottom: 4px;
 }

 .heat-tip-info {
     font-family: 'Share Tech Mono', monospace;
     font-size: 13px;
     letter-spacing: 1px;
 }

 .heat-tip-info.studied {
     color: #00ff88;
 }

 .heat-tip-info.not-studied {
     color: rgba(255, 107, 107, .7);
 }

 @media(max-width:480px) {
     .app {
         padding: 12px 10px 60px;
     }

     .sys-title {
         letter-spacing: 4px;
     }

     .cards-row {
         grid-template-columns: 1fr 1fr;
     }

     .q-row {
         grid-template-columns: 1fr;
     }

     .controls {
         gap: 6px;
     }

     .ctrl-btn {
         flex: 1;
         text-align: center;
     }

     .log-entry {
         flex-direction: column;
         align-items: flex-start;
         gap: 4px;
     }

     .preview-sep {
         display: none;
     }

     .preview {
         justify-content: space-around;
     }
 }

 .timer-ring {
     width: 160px;
     height: 160px;
 }

 @media(max-width:360px) {
     .time-display {
         font-size: 28px;
     }

     .cards-row {
         grid-template-columns: 1fr;
     }
 }

 ::-webkit-scrollbar {
     width: 4px;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb {
     background: rgba(0, 255, 255, .3);
 }