@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0');
:root{--app-primary:#2563eb;--app-on-primary:#fff;--app-bg:#fff;--app-surface:#f7f7f8;--app-text:#202124;--app-muted:#737373;--app-border:#e5e7eb;--app-radius:10px;--app-hover:#ebebed;--app-danger:#b42318;--sidebar-width:258px;color-scheme:light}
html[data-theme=dark]{--app-bg:#181818;--app-surface:#242424;--app-text:#f3f3f3;--app-muted:#a3a3a3;--app-border:#373737;--app-hover:#313131;--app-danger:#fb8a83;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5}body{background:var(--app-bg);color:var(--app-text)}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}:focus-visible{outline:2px solid var(--app-primary);outline-offset:3px}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:21px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}.shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);height:100vh;position:sticky;top:0;flex-shrink:0;display:flex;flex-direction:column;padding:19px 12px 14px;background:var(--app-surface);border-right:1px solid var(--app-border);transition:width .18s ease}.sidebar-head{display:flex;align-items:center;gap:8px;margin:0 6px 24px;min-height:36px}.brand{min-width:0;display:flex;align-items:center;gap:11px;flex:1}.brand-text{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-mark{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--app-primary);color:var(--app-on-primary);border-radius:10px;font-weight:700;font-size:17px}.brand-logo{width:36px;height:36px;object-fit:contain;flex:none}.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--app-muted);border-radius:8px;width:34px;height:34px;padding:0}.icon-btn:hover,.nav-item:hover,.account-link:hover{background:var(--app-hover)}.nav-links{flex:1;overflow-y:auto;min-height:0}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--app-text);min-height:42px}.nav-item .material-symbols-outlined{color:var(--app-muted)}.nav-item.active{background:var(--app-hover);font-weight:550}.sidebar-foot{border-top:1px solid var(--app-border);padding-top:11px}.account-link{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;min-width:0}.avatar{height:35px;width:35px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--app-hover);font-weight:650;flex:none}.user-info{min-width:0;display:flex;flex-direction:column}.user-info strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}.user-info small{color:var(--app-muted);font-size:11px}.logout{width:100%;border:0;background:transparent;text-align:left}.main-area{flex:1;min-width:0}.topbar{height:62px;padding:0 34px;display:flex;align-items:center;gap:12px}.topbar-title{font-weight:600;font-size:14px}.page-content{padding:28px 38px 90px}.page-inner{width:100%;max-width:var(--page-content-width,920px);margin:0 auto}.page-heading{margin:0 0 28px}.page-heading h1{font-size:25px;letter-spacing:-.65px;font-weight:640;margin:0 0 5px}.page-heading p{margin:0}.muted{color:var(--app-muted)}.small{font-size:12px}.center{text-align:center}.ui-card{background:var(--app-bg);border:1px solid var(--app-border);border-radius:12px;padding:26px}.ui-card h2{font-size:16px;letter-spacing:-.2px;margin:0 0 20px;font-weight:620}.ui-card p{margin:0}.welcome{margin-top:16px;width:100%;max-width:none}.welcome h2{margin-bottom:7px}.stack{display:flex;flex-direction:column;gap:17px}.stack-lg{display:flex;flex-direction:column;gap:20px}.settings-stack{display:flex;flex-direction:column;gap:16px;width:100%;min-width:0}.ui-label{font-size:12px;font-weight:550;display:block;margin-bottom:7px}.ui-input{display:block;border:1px solid var(--app-border);background:var(--app-bg);color:var(--app-text);border-radius:9px;width:100%;min-height:42px;padding:9px 12px;outline:none;transition:border-color .12s}.ui-input:focus{border-color:var(--app-primary)}textarea.ui-input{resize:vertical}.ui-input[readonly]{background:var(--app-surface);color:var(--app-muted)}.ui-btn{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--app-border);border-radius:9px;padding:10px 17px;background:var(--app-bg);color:var(--app-text);font-weight:550;min-height:40px}.ui-btn:hover{background:var(--app-hover)}.ui-btn-primary{background:var(--app-primary);color:var(--app-on-primary);border-color:var(--app-primary)}.ui-btn-primary:hover{filter:brightness(.91);background:var(--app-primary)}.ui-btn-primary:focus-visible{outline-color:var(--app-text)}.full{width:100%}.ui-alert{border-radius:9px;padding:12px 15px;background:var(--app-surface);border:1px solid var(--app-border);margin-bottom:22px}.ui-alert.is-error{border-color:var(--app-danger)}.auth-screen{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:30px 18px}.auth-shell{width:100%;max-width:390px}.auth-brand{display:flex;justify-content:center;margin-bottom:26px}.auth-brand .brand-mark{width:45px;height:45px;border-radius:13px;font-size:23px}.auth-shell h1{text-align:center;font-size:27px;letter-spacing:-.8px;margin:0}.auth-shell .center{margin:8px 0 30px}.checkbox-label{display:flex;align-items:center;gap:9px;color:var(--app-text);font-size:13px;cursor:pointer}.checkbox-label input{accent-color:var(--app-primary);width:16px;height:16px;margin:0}.settings-inline{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.settings-inline .ui-input{max-width:220px}.settings-inline .ui-label{width:100%;margin-bottom:-4px}.file-input{padding:9px;height:auto}.text-link{color:var(--app-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.text-link:hover{color:var(--app-text)}.settings-actions{display:flex;justify-content:flex-start}.quiet-export{text-align:right;margin-top:28px;font-size:12px}.color-line{display:flex;align-items:center;gap:12px}.color-line input[type=color]{width:42px;height:39px;border:1px solid var(--app-border);padding:3px;background:var(--app-bg);border-radius:8px;cursor:pointer}.color-value{color:var(--app-muted);font-size:12px}.sidebar-overlay,.mobile-menu,.mobile-close{display:none}.sidebar.collapsed{width:73px}.sidebar.collapsed .brand-text,.sidebar.collapsed .nav-item span:not(.material-symbols-outlined),.sidebar.collapsed .user-info{display:none}.sidebar.collapsed .sidebar-head{margin-left:3px;flex-direction:column;gap:14px;margin-bottom:16px}.sidebar.collapsed .sidebar-head .brand{flex:none}.sidebar.collapsed .nav-item{justify-content:center;padding-left:7px;padding-right:7px}.sidebar.collapsed .account-link{justify-content:center}.sidebar.collapsed .sidebar-foot .logout{justify-content:center}.sidebar.collapsed .collapse-trigger .material-symbols-outlined{transform:rotate(180deg)}
@media(max-width:768px){.sidebar{position:fixed;left:0;top:0;height:100dvh;z-index:30;transform:translateX(-100%);width:min(290px,85vw);box-shadow:8px 0 40px transparent}.sidebar.collapsed{width:min(290px,85vw)}body.menu-open .sidebar{transform:translateX(0);box-shadow:8px 0 40px #0002}body.menu-open .sidebar-overlay{display:block;position:fixed;inset:0;background:#0008;z-index:29}.sidebar .collapse-trigger{display:none}.sidebar.collapsed .brand-text,.sidebar.collapsed .nav-item span:not(.material-symbols-outlined),.sidebar.collapsed .user-info{display:initial}.sidebar.collapsed .sidebar-head{flex-direction:row;margin:0 6px 24px}.sidebar.collapsed .sidebar-head .brand{flex:1}.sidebar.collapsed .nav-item{justify-content:flex-start;padding:10px 12px}.sidebar.collapsed .account-link{justify-content:flex-start}.sidebar.collapsed .sidebar-foot .logout{justify-content:flex-start}.topbar{height:58px;padding:0 16px}.mobile-menu{display:inline-flex}.page-content{padding:23px 16px 65px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:23px}.ui-card{padding:19px}.settings-stack{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.auth-screen .auth-shell{max-width:480px}.auth-screen .auth-shell small{display:block;margin-top:5px;font-size:.75rem}.auth-screen .auth-shell hr{border:0;border-top:1px solid var(--app-border);width:100%;margin:4px 0}

/* Refinamentos 0.1.2 */
.password-control{position:relative}.password-control .ui-input{padding-right:49px}.password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--app-muted);height:36px;width:39px;border-radius:7px;display:flex;justify-content:center;align-items:center}.password-toggle:hover{color:var(--app-text);background:var(--app-hover)}
.image-upload-row{display:flex;align-items:center;gap:15px}.image-preview{width:105px;height:78px;flex:none;border:1px solid var(--app-border);background:var(--app-surface);border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:5px}.image-preview img{max-height:100%;max-width:100%;object-fit:contain}.image-upload-actions{flex:1;min-width:0}.image-remove{display:block;margin-top:9px;border:0;background:transparent;padding:0;font-size:12px}.image-remove[hidden],[data-custom-width][hidden]{display:none!important}input[type=range]{width:100%;accent-color:var(--app-primary)}
@media(max-width:768px){.page-inner{max-width:100%!important}.image-upload-row{align-items:start}.image-preview{width:80px;height:65px}}

/* v0.1.3 — layouts fluidos, sem largura máxima interna para cards e campos */
.page-inner > .settings-stack,.settings-stack > .ui-card,.settings-stack form,.settings-stack .ui-input{width:100%;max-width:none;min-width:0}
/* Campo de mídia compartilhado */
.media-field{min-width:0}
.media-field-row{display:flex;align-items:center;gap:16px;min-width:0}
.media-preview{width:88px;height:88px;flex:none;border:1px solid var(--app-border);background:var(--app-surface);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:8px}
.media-preview-wide{width:152px;height:88px}
.media-preview img{display:block;width:100%;height:100%;object-fit:contain}
.media-field-actions{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.media-action-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.media-select{font-size:13px;cursor:pointer;user-select:none;padding:8px 13px;min-height:36px}
.media-select:hover{background:var(--app-hover)}
.media-select:focus-visible{outline:2px solid var(--app-primary);outline-offset:3px}
.media-remove{border:0;background:transparent;padding:4px 0;font-size:12px}
.media-remove[hidden]{display:none!important}
.media-file-name{overflow-wrap:anywhere}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.media-field-row{gap:12px}.media-preview{width:72px;height:72px}.media-preview-wide{width:100px;height:72px}.media-action-row{gap:10px}}

/* v0.1.4: identidade do login e exportação discreta de estilos. */
.auth-brand-logo{display:block;max-width:min(220px,80vw);max-height:84px;width:auto;height:auto;object-fit:contain}
.styles-export{margin-top:14px}
.styles-export-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.styles-export-row .ui-btn{flex:none}
@media(max-width:600px){.styles-export-row{align-items:flex-start;flex-direction:column}}

/* v0.2.0 - Usuários e módulos */
.users-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.users-search{display:flex;gap:8px;flex:1;max-width:480px}.users-search .ui-input{min-width:130px;flex:1}.users-table-wrap .ui-table{width:100%;border-collapse:collapse}.users-table-wrap th,.users-table-wrap td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--app-border)}.users-table-wrap th{font-size:12px;color:var(--app-muted);font-weight:600}.users-table-wrap tbody tr:last-child td{border-bottom:0}.users-table-wrap{overflow-x:auto}.user-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:34px}.user-checkbox input{accent-color:var(--app-primary);width:17px;height:17px}.module-line{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--app-border)}.module-line:last-of-type{border:0}.module-line .muted{font-size:12px}.module-help{display:inline-flex;vertical-align:middle;color:var(--app-muted);margin-left:8px}.module-help .material-symbols-outlined{font-size:18px}@media(max-width:600px){.module-line{gap:8px}.users-table-wrap .ui-table{min-width:520px}}
