:root{
    --bg:#f5f5f7;--surface:#fff;--surface-elevated:#fff;
    --text:#1d1d1f;--text-secondary:#86868b;
    --accent:#007aff;--accent-hover:#0056b3;
    --danger:#ff3b30;--success:#34c759;--warning:#ff9500;
    --border:#e5e5e7;--radius:12px;--radius-sm:8px;
    --shadow:0 2px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.12);
    --topbar-bg:rgba(255,255,255,.85);
    --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
[data-theme="dark"]{
    --bg:#000;--surface:#1c1c1e;--surface-elevated:#2c2c2e;
    --text:#f5f5f7;--text-secondary:#8e8e93;
    --accent:#0a84ff;--accent-hover:#409cff;
    --danger:#ff453a;--success:#30d158;--warning:#ff9f0a;
    --border:#38383a;
    --shadow:0 2px 12px rgba(0,0,0,.4);--shadow-lg:0 8px 32px rgba(0,0,0,.6);
    --topbar-bg:rgba(28,28,30,.85);
    color-scheme:dark;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}button{cursor:pointer;border:none;font-family:inherit}
.top-bar{position:fixed;top:0;left:0;right:0;height:56px;background:var(--topbar-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:4px}
.top-bar-center{flex:1;text-align:center;padding:0 8px}
.top-bar-center h1{font-size:17px;font-weight:600}
.logo{font-size:24px;line-height:1}
.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;transition:background .2s}
.icon-btn:hover,.icon-btn:active{background:var(--bg)}
.search-input{width:100%;height:36px;border:none;border-radius:18px;background:var(--surface-elevated);padding:0 16px;font-size:15px;outline:none;color:var(--text)}
.search-input:focus{box-shadow:0 0 0 2px var(--accent)}
.active-tags-bar{position:fixed;top:56px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 12px;display:flex;align-items:center;gap:8px;z-index:99;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tag-filter-btn{padding:6px 12px;border-radius:16px;background:var(--accent);color:#fff;font-size:13px;font-weight:500;white-space:nowrap;flex-shrink:0}
.fav-btn{background:#ff2d55}
.active-tags{display:flex;gap:6px;flex-shrink:0}
.active-tag{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:14px;background:var(--accent);color:#fff;font-size:12px;font-weight:500;white-space:nowrap}
.active-tag .remove-tag{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;cursor:pointer}
.image-counter{margin-left:auto;font-size:12px;color:var(--text-secondary);white-space:nowrap;padding:4px 8px;background:var(--surface-elevated);border-radius:12px}
.gallery-container{margin-top:108px;padding:12px;column-count:1;column-gap:12px}
@media(min-width:500px){.gallery-container{column-count:2}}
@media(min-width:800px){.gallery-container{column-count:3}}
@media(min-width:1100px){.gallery-container{column-count:4}}
@media(min-width:1400px){.gallery-container{column-count:5}}
.image-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;break-inside:avoid;margin-bottom:12px;display:inline-block;width:100%}
.image-card-title{padding:8px 12px 0;font-size:14px;font-weight:600}
.image-card-wrapper{position:relative;cursor:pointer}
.image-card-wrapper img{width:100%;height:auto;display:block}
.image-card-actions{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .2s}
.image-card:hover .image-card-actions,.image-card:active .image-card-actions{opacity:1}
@media(max-width:600px){.image-card-actions{opacity:1}}
.card-action-btn{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;backdrop-filter:blur(4px)}
.card-action-btn:hover{background:rgba(0,0,0,.7)}
.card-action-btn.favorited{background:#ff2d55}
.image-card-tags{padding:6px 12px 8px;display:flex;flex-wrap:wrap;gap:4px}
.image-card-tags .mini-tag{font-size:10px;color:var(--text-secondary);padding:2px 6px;background:var(--surface-elevated);border-radius:4px;cursor:pointer}
.image-card-tags .mini-tag:hover{background:var(--accent);color:#fff}
.image-card-description{padding:0 12px 10px;font-size:12px;color:var(--text-secondary)}
.scroll-sentinel{height:1px;width:100%}
.loading-indicator{text-align:center;padding:24px}
.loading-indicator p{margin-top:8px;font-size:13px;color:var(--text-secondary)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.end-message{text-align:center;padding:24px;color:var(--text-secondary);font-size:14px}
.bottom-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:flex-end;justify-content:center}
.bottom-sheet-overlay.active{display:flex}
.bottom-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 8px}
.sheet-header h3{font-size:17px;font-weight:600}
.sheet-close{width:32px;height:32px;border-radius:50%;background:var(--surface-elevated);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text)}
.sheet-search{padding:8px 20px}
.sheet-search input{width:100%;height:40px;border:1px solid var(--border);border-radius:10px;padding:0 14px;font-size:15px;outline:none;background:var(--surface-elevated);color:var(--text)}
.sheet-search input:focus{border-color:var(--accent)}
.sheet-sort{display:flex;gap:8px;padding:4px 20px 8px}
.sort-btn{padding:6px 14px;border-radius:16px;background:var(--surface-elevated);font-size:13px;color:var(--text-secondary)}
.sort-btn.active{background:var(--accent);color:#fff}
.sheet-alphabet{display:flex;flex-wrap:wrap;gap:2px;padding:4px 20px 8px;justify-content:center}
.alpha-letter{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.alpha-letter:hover{background:var(--surface-elevated)}
.sheet-tags{flex:1;overflow-y:auto;padding:8px 20px 20px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tag-chip{padding:8px 16px;border-radius:20px;background:var(--surface-elevated);font-size:14px;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text)}
.tag-chip.selected{background:var(--accent);color:#fff}
.tag-chip .tag-count{font-size:11px;opacity:.6}
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:300;display:none;align-items:center;justify-content:center;cursor:pointer}
.lightbox-overlay.active{display:flex}
.lightbox-content{max-width:95vw;max-height:95vh;position:relative;cursor:default}
.lightbox-content img{max-width:95vw;max-height:90vh;object-fit:contain;border-radius:4px}
.lightbox-caption{text-align:center;padding:12px;color:#fff;font-size:14px}
.lightbox-caption .lb-title{font-weight:600;font-size:16px;margin-bottom:4px}
.lightbox-caption .lb-desc{opacity:.7;font-size:13px}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-container{background:var(--surface);border-radius:var(--radius);padding:32px 24px;width:100%;max-width:380px;box-shadow:var(--shadow-lg)}
.auth-container h1{text-align:center;font-size:28px;margin-bottom:8px}
.auth-container h2{text-align:center;font-size:17px;color:var(--text-secondary);margin-bottom:24px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{height:48px;border:1px solid var(--border);border-radius:10px;padding:0 16px;font-size:15px;outline:none;background:var(--surface-elevated);color:var(--text)}
.auth-form input:focus{border-color:var(--accent)}
.auth-link{text-align:center;margin-top:16px;font-size:14px}
.btn{height:48px;border-radius:10px;font-size:15px;font-weight:600;padding:0 24px;display:inline-flex;align-items:center;justify-content:center}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface-elevated);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{filter:brightness(1.1)}
.btn-warning:active{transform:scale(0.98)}
.btn-full{width:100%}
.btn-small{height:32px;padding:0 12px;font-size:13px;border-radius:6px;background:var(--surface-elevated);color:var(--text)}
.btn-small.btn-danger{background:var(--danger);color:#fff}
.upload-container{margin-top:56px;padding:16px;max-width:600px;margin-left:auto;margin-right:auto}
.upload-form{display:flex;flex-direction:column;gap:16px}
.file-upload-area{border:2px dashed var(--border);border-radius:var(--radius);padding:32px;text-align:center;position:relative;overflow:hidden}
.file-upload-area:hover{border-color:var(--accent)}
.file-upload-area input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-icon{font-size:48px}.upload-hint{color:var(--text-secondary);font-size:13px;margin-top:8px}
.file-preview img{max-width:100%;max-height:300px;border-radius:var(--radius-sm)}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.form-group input,.form-group textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;font-size:15px;font-family:inherit;outline:none;background:var(--surface-elevated);color:var(--text)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group textarea{min-height:80px;resize:vertical}
.form-group small{font-size:11px;color:var(--text-secondary)}
.admin-container{margin-top:56px;padding:16px;max-width:800px;margin-left:auto;margin-right:auto}
.admin-stats{display:flex;gap:12px;margin-bottom:20px}
.stat{flex:1;background:var(--surface);border-radius:var(--radius-sm);padding:16px;text-align:center;font-size:14px;font-weight:500}
.admin-section{background:var(--surface);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.admin-section h2{font-size:16px;margin-bottom:12px}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:14px;flex:1;min-width:100px;background:var(--surface-elevated);color:var(--text)}
.tags-list{display:flex;flex-direction:column;gap:8px}
.tag-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface-elevated);border-radius:var(--radius-sm);flex-wrap:wrap;gap:8px}
.tag-info{display:flex;align-items:center;gap:8px}
.tag-name{font-weight:500}.tag-count{color:var(--text-secondary);font-size:13px}
.tag-actions{display:flex;gap:4px;align-items:center}
.tag-edit-form input[type="text"]{height:32px;font-size:13px}
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px}
.alert-error{background:#fff0f0;color:var(--danger);border:1px solid #fcc}
.alert-success{background:#f0fff4;color:var(--success);border:1px solid #cfd}
.alert-warning{background:#fff8f0;color:var(--warning);border:1px solid #fec}
[data-theme="dark"] .alert-error{background:#3a1a1a;color:#ff9999;border-color:#5a2a2a}
[data-theme="dark"] .alert-success{background:#1a3a2a;color:#99ffbb;border-color:#2a5a3a}
[data-theme="dark"] .alert-warning{background:#3a2a1a;color:#ffcc99;border-color:#5a4a2a}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius);padding:24px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.modal h3{font-size:18px}
.modal input,.modal textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;font-size:15px;font-family:inherit;outline:none;background:var(--surface-elevated);color:var(--text)}
.modal textarea{min-height:80px;resize:vertical}
.modal label{font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:4px}
.edit-tags-section{display:flex;flex-direction:column;gap:8px}
.edit-quick-tags{max-height:200px;overflow-y:auto}
.modal-actions{display:flex;gap:8px;margin-top:8px}
.modal-actions .btn{flex:1;height:40px;font-size:14px}
@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,20px)}15%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-20px)}}
.theme-toggle-wrapper{width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;background:transparent;border:none}
.theme-toggle-wrapper:hover{background:var(--bg);border-radius:50%}
.theme-toggle{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .4s ease}
.theme-toggle:active{transform:rotate(180deg)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;transition:opacity .3s,transform .4s}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(-90deg)}
.theme-toggle .icon-sun{opacity:0;transform:rotate(90deg)}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0)}
.theme-float{position:fixed;top:20px;right:20px;z-index:10;background:var(--surface);box-shadow:var(--shadow);border-radius:50%;border:1px solid var(--border)}
[data-theme="dark"] .image-card-wrapper img,[data-theme="dark"] .lightbox-content img,[data-theme="dark"] .file-preview img,[data-theme="dark"] .duplicate-preview img{filter:brightness(.95)}
.tag-form-group{gap:8px}
.selected-tags-container{display:flex;flex-wrap:wrap;gap:6px;min-height:36px;padding:8px;background:var(--surface-elevated);border-radius:var(--radius-sm);border:1px solid var(--border)}
.selected-tags-container:empty::before{content:"Тэги пока не выбраны";color:var(--text-secondary);font-size:12px;padding:4px 8px;font-style:italic}
.selected-tag-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:14px;background:var(--accent);color:#fff;font-size:13px;font-weight:500;animation:chipPop .2s ease}
@keyframes chipPop{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}
.selected-tag-chip .remove{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;cursor:pointer;transition:background .2s}
.selected-tag-chip .remove:hover{background:rgba(255,255,255,.5)}
.autocomplete-wrapper{position:relative}
.autocomplete-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);max-height:240px;overflow-y:auto;z-index:50;display:none}
.autocomplete-dropdown.visible{display:block}
.autocomplete-item{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;transition:background .15s;border-bottom:1px solid var(--border)}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover,.autocomplete-item.active{background:var(--surface-elevated)}
.autocomplete-item strong{color:var(--accent);font-weight:700}
.autocomplete-item .tag-count{font-size:11px;color:var(--text-secondary);background:var(--bg);padding:2px 6px;border-radius:8px}
.autocomplete-new{color:var(--accent);font-weight:500}
.autocomplete-new::before{content:"+ ";opacity:.6}
.quick-tags-section{background:var(--surface);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.quick-tags-tabs{display:flex;gap:4px;background:var(--surface-elevated);border-radius:8px;padding:3px}
.quick-tab{flex:1;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;transition:all .2s}
.quick-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.quick-tags-search{position:relative}
.quick-tags-search input{width:100%;height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;font-size:14px;background:var(--surface-elevated);color:var(--text);outline:none}
.quick-tags-search input:focus{border-color:var(--accent)}
.quick-tags-list{display:flex;flex-wrap:wrap;gap:6px;max-height:300px;overflow-y:auto;padding:4px 0}
.quick-tags-list:empty::after{content:"Нет тэгов";color:var(--text-secondary);font-size:12px;padding:8px;width:100%;text-align:center}
.quick-tag-btn{padding:6px 12px;border-radius:14px;background:var(--surface-elevated);color:var(--text);font-size:13px;font-weight:500;border:1px solid var(--border);display:inline-flex;align-items:center;gap:4px;transition:all .2s;cursor:pointer}
.quick-tag-btn small{font-size:10px;color:var(--text-secondary);font-weight:400;opacity:.8}
.quick-tag-btn:hover{border-color:var(--accent);color:var(--accent)}
.quick-tag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.quick-tag-btn.active small{color:rgba(255,255,255,.8)}
.duplicate-check-status{display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface-elevated);border-radius:var(--radius-sm);border:1px solid var(--border);font-size:14px;color:var(--text-secondary)}
.spinner-small{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.duplicate-warning{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:center;border:2px solid var(--warning)}
.duplicate-warning p{margin:12px 0;font-size:15px}
.dup-hint{font-size:13px;color:var(--text-secondary)!important}
.dup-actions{display:flex;gap:12px;margin-top:16px}
.dup-actions .btn{flex:1;height:44px;font-size:14px}
.duplicate-tags-section{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.duplicate-preview img{max-width:200px;border-radius:var(--radius-sm);margin-bottom:12px}