/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-400:oklch(79.2% .209 151.711);--color-gray-600:oklch(44.6% .03 256.802);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-widest:.1em;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.fixed{position:fixed}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mr-2{margin-right:calc(var(--spacing) * -2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.px-0{padding-inline:0}.px-1{padding-inline:var(--spacing)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-gray-600{color:var(--color-gray-600)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}  html,body{background:#000;margin:0;padding:0;overflow:hidden;height:100dvh;width:100vw}
:root { --tb-height: 65px; --m-accent: #0EE8ED; --win-bg: #0f1115; }
 button, .cv-btn, .calendar-nav-btn, .task-btn, .tb-arrow, .app-icon, .dock-label, .dock-circle, .lang-btn, .calc-btn, .notepad-pin-key, .vk-key {
-webkit-appearance: none;
 appearance: none;
 outline: none;
}
 button:focus, .cv-btn:focus, .calendar-nav-btn:focus, .calendar-day:focus {
 outline: none;
}
 button:focus-visible, .cv-btn:focus-visible, .calendar-nav-btn:focus-visible {
 outline: 2px solid var(--m-accent);
 outline-offset: 2px;
}
 html, body {
 background-color: #000 !important;
 background-image: url('ecran-cyan/ecran-cyan.webp');
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;
 background-size: cover;
 overflow: hidden !important;
 height: 100dvh !important;
 width: 100vw !important;
 margin: 0;
 padding: 0;
 font-family: 'Inter', sans-serif;
 touch-action: none;
}
.dock-row {
 position: fixed;
 right: max(20px, env(safe-area-inset-right, 0px) + 20px);
 z-index: 5;
 display: flex;
 align-items: center;
 gap: 10px;
 opacity: 0;
 transform: translateX(16px);
 animation: dock-in .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes dock-in { to { opacity: 1; transform: translateX(0); } }
.dock-label {
 position: relative;
 background: linear-gradient(135deg, rgba(14,232,237,0.14), rgba(0,0,0,0.68));
 border: 1px solid rgba(14,232,237,0.35);
 border-radius: 999px;
 padding: 6px 14px;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: #eafdff;
 text-shadow: 0 0 10px rgba(14,232,237,0.35);
 backdrop-filter: blur(8px);
 white-space: nowrap;
 cursor: pointer;
 user-select: none;
 touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
 transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
 box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.dock-label::after {
 content: "";
 position: absolute;
 top: 50%; left: 100%;
 width: 10px; height: 1px;
 background: linear-gradient(90deg, rgba(14,232,237,0.6), transparent);
 transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
.dock-row:hover .dock-label,
.dock-label:hover {
 border-color: var(--m-accent);
 background: linear-gradient(135deg, rgba(14,232,237,0.25), rgba(0,0,0,0.72));
 box-shadow: 0 0 16px rgba(14,232,237,0.4);
 transform: translateY(-1px);
}
}
.dock-circle {
 background: linear-gradient(135deg, rgba(14,232,237,0.14), rgba(0,0,0,0.68));
 border-radius: 50%;
 border: 1px solid rgba(14,232,237,0.35);
 box-shadow: 0 4px 14px rgba(0,0,0,0.35);
 cursor: pointer;
 color: #eafdff;
 backdrop-filter: blur(8px);
 width: 40px;
 height: 40px;
 padding: 8px;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 13px;
 flex-shrink: 0;
 transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
.dock-row:hover .dock-circle {
 border-color: var(--m-accent);
 background: linear-gradient(135deg, rgba(14,232,237,0.25), rgba(0,0,0,0.72));
 box-shadow: 0 0 16px rgba(14,232,237,0.4);
 transform: translateY(-1px);
}
}
#fs-dock-label.is-fs-exit {
 border-color: rgba(255,90,90,0.5);
 background: linear-gradient(135deg, rgba(255,90,90,0.16), rgba(0,0,0,0.68));
 color: #ff8a8a;
 text-shadow: 0 0 10px rgba(255,90,90,0.4);
}
#fs-dock-label.is-fs-exit::after { background: linear-gradient(90deg, rgba(255,90,90,0.6), transparent); }
@media (hover: hover) and (pointer: fine) {
.dock-row:hover #fs-dock-label.is-fs-exit,
#fs-dock-label.is-fs-exit:hover {
 border-color: #ff8a8a;
 background: linear-gradient(135deg, rgba(255,90,90,0.28), rgba(0,0,0,0.72));
 box-shadow: 0 0 16px rgba(255,90,90,0.45);
}
}
#fs-toggle.is-fs-exit {
 border-color: rgba(255,90,90,0.5);
 background: linear-gradient(135deg, rgba(255,90,90,0.16), rgba(0,0,0,0.68));
 color: #ff8a8a;
}
@media (hover: hover) and (pointer: fine) {
.dock-row:hover #fs-toggle.is-fs-exit,
#fs-toggle.is-fs-exit:hover {
 border-color: #ff8a8a;
 background: linear-gradient(135deg, rgba(255,90,90,0.28), rgba(0,0,0,0.72));
 box-shadow: 0 0 16px rgba(255,90,90,0.45);
}
}
@media (max-width: 480px) {
.dock-label { font-size: 9.5px; padding: 5px 11px; letter-spacing: 0.03em; }
.dock-row { gap: 7px; }
#desktop { padding-right: 150px; }
}
@media (max-width: 360px) {
.dock-label { display: none; }
#desktop { padding-right: 80px; }
}
#desktop { height: calc(100vh - var(--tb-height)); position: relative; padding: 25px; padding-right: 190px; z-index: 1; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; }
.app-icon { width: 90px; display: flex; flex-direction: column; align-items: center; cursor: pointer; margin-bottom: 15px; }
.app-icon .icon-box { width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; border: 1px solid transparent; color: white; }
.app-icon span { color: white; font-size: 11px; margin-top: 8px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.window { 
 position: absolute; background: var(--win-bg); border-radius: 15px; 
 display: none; flex-direction: column; box-shadow: 0 40px 80px rgba(0,0,0,0.9); 
 overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
}
.win-header { 
 background: #000; color: white; height: 45px; min-height: 45px;
 padding: 0 18px; display: flex; justify-content: space-between; align-items: center; 
 cursor: move; border-bottom: 1px solid rgba(255,255,255,0.05);
 position: relative; z-index: 9999;
}
.win-header button { cursor: pointer; }
.win-min-btn { cursor: pointer; color: #FDE24A; transition: color .1s ease; }
@media (hover: hover) and (pointer: fine) { .win-min-btn:hover, .win-min-btn.is-hovered { color: #EAB308; } }
.win-min-btn:active { color: #EAB308; }
.win-maximize-btn { cursor: pointer; color: var(--m-accent); transition: color .1s ease; }
.win-maximize-btn.is-maxed { color: #4ADE80; }
.win-maximize-btn.is-maxed:active { color: var(--m-accent); }
.win-maximize-btn:not(.is-maxed):active { color: #4ADE80; }
@media (hover: hover) and (pointer: fine) { .win-maximize-btn.is-maxed:hover, .win-maximize-btn.is-maxed.is-hovered { color: var(--m-accent); } }
@media (hover: hover) and (pointer: fine) { .win-maximize-btn:not(.is-maxed):hover, .win-maximize-btn:not(.is-maxed).is-hovered { color: #4ADE80; } }
.presentation-container { display: flex; position: relative; height: calc(100% - 45px); background: #0a0c10; color: white; overflow: hidden; container-type: size; }
.presentation-content { padding: 30px; overflow-y: auto; width: 100%; height: 100%; box-sizing: border-box; container-type: size; }
#taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--tb-height); background: rgba(0,0,0,0.95); backdrop-filter: blur(25px); display: flex; align-items: center; gap: 10px; padding: 0 15px; z-index: 9999; border-top: 1px solid var(--m-accent); box-sizing: border-box;}
.tb-brand { font-weight: 900; color: var(--m-accent); letter-spacing: 1px; font-size: 14px; text-shadow: 0 0 10px rgba(14,232,237,0.5); white-space: nowrap; flex-shrink: 0; }
.task-btn { height: 48px; width: 48px; border-radius: 12px; background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent; flex-shrink: 0; box-sizing: border-box; transition: background 0.2s ease, border-color 0.2s ease; }
.task-btn.active { border-color: var(--m-accent); background: rgba(14,232,237,0.14); box-shadow: inset 0 0 10px rgba(14,232,237,0.55); }
.tb-middle { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 100%; position: relative; overflow-x: hidden; overflow-y: visible; }
.tb-arrow { flex-shrink: 0; box-sizing: border-box; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 0; margin: 0; cursor: pointer; opacity: 0.35; pointer-events: none; transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.tb-middle.has-items .tb-arrow { display: flex; }
.tb-arrow.tb-arrow-enabled { opacity: 1; pointer-events: auto; }
.tb-arrow-enabled:active { background: rgba(14,232,237,0.22); }
.tb-arrow:focus-visible { outline-offset: -2px; }
.tb-arrow-chevron { display: block; width: 0; height: 0; flex-shrink: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; box-sizing: border-box; transition: border-left-color 0.15s ease, border-right-color 0.15s ease; }
.tb-arrow-left .tb-arrow-chevron { border-right: 9px solid var(--m-accent); }
.tb-arrow-right .tb-arrow-chevron { border-left: 9px solid var(--m-accent); }
@media (hover: hover) { .tb-arrow-enabled:hover { background: rgba(14,232,237,0.14); border-color: var(--m-accent); } .tb-arrow-enabled:hover.tb-arrow-left .tb-arrow-chevron { border-right-color: #fff; } .tb-arrow-enabled:hover.tb-arrow-right .tb-arrow-chevron { border-left-color: #fff; } }
.tb-viewport { overflow-x: hidden; overflow-y: visible; height: 100%; display: none; align-items: center; flex-shrink: 0; width: 0; min-width: 0; }
#task-items { display: flex; align-items: center; gap: 12px; transition: transform 0.25s ease; will-change: transform; }
#tb-clock { flex-shrink: 0; font-variant-numeric: tabular-nums; }
#tb-clock-hh, #tb-clock-mm { display: inline-block; min-width: 1.15em; text-align: center; }
.secure-badge {
 position: fixed;
 right: 14px;
 bottom: calc(var(--tb-height) + 14px);
 z-index: 1;
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 7px 12px;
 background: #0a0c10;
 background: rgba(8,10,14,0.96);
 border: 1px solid rgba(14,232,237,0.55);
 border-radius: 10px;
-webkit-backdrop-filter: blur(14px);
 backdrop-filter: blur(14px);
 box-shadow: 0 10px 26px rgba(0,0,0,0.65), 0 0 14px rgba(14,232,237,0.18);
 color: #ffffff;
 text-shadow: 0 1px 2px rgba(0,0,0,0.9);
 font-weight: 900;
 font-size: 11.5px;
 letter-spacing: 0.02em;
 white-space: nowrap;
 pointer-events: none;
 opacity: 0;
 visibility: hidden;
 transform: translateY(6px) scale(0.96);
 transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
 box-sizing: border-box;
}
.secure-badge.is-visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(0) scale(1);
 transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}
.secure-badge.is-covered {
 opacity: 0 !important;
 visibility: hidden !important;
 pointer-events: none !important;
 transition: none !important;
}
.secure-badge-icon { width: 15px; height: 15px; flex-shrink: 0; color: #0EE8ED; }
.secure-badge-textwrap { position: relative; display: inline-grid; }
.secure-badge-txt {
 grid-area: 1 / 1;
 visibility: hidden;
 color: #ffffff;
}
.secure-badge-txt.is-active { visibility: visible; }
.secure-badge-word { color: #0EE8ED; }
.secure-badge-grade { color: #4ADE80; }
@media (max-width: 480px) {
.secure-badge { font-size: 10px; padding: 6px 10px; }
.secure-badge-icon { width: 13px; height: 13px; }
}
@media (max-width: 480px) {
:root { --tb-height: 60px; }
#taskbar { gap: 6px; }
.tb-brand { font-size: 12px !important; }
#tb-clock { font-size: 11.5px !important; }
.task-btn { width: 42px !important; height: 42px !important; }
.tb-arrow { width: 32px !important; height: 32px !important; }
.tb-middle { gap: 6px; }
#task-items { gap: 8px; }
}
@media (max-width: 360px) {
:root { --tb-height: 56px; }
#taskbar { gap: 4px; }
.tb-brand { font-size: 10px !important; }
#tb-clock { font-size: 9.5px !important; }
.task-btn { width: 38px !important; height: 38px !important; border-radius: 10px; }
.tb-arrow { width: 28px !important; height: 28px !important; }
.tb-middle { gap: 4px; }
#task-items { gap: 6px; }
}
@media (orientation: landscape) {
#desktop {
 flex-direction: row !important; 
 align-items: flex-start !important;
 align-content: flex-start !important;
 gap: 1px !important;
 padding-bottom: 80px !important;
 overflow-y: auto !important;
}
.app-icon {
 margin-bottom: 0 !important;
 width: 90px !important;
}
}
.app-icon {
-webkit-tap-highlight-color: transparent !important;
 touch-action: manipulation !important;
 user-select: none !important;
 cursor: pointer !important;
}
.app-icon:active .icon-box,
.app-icon.icon-pressed .icon-box {
 border-color: var(--m-accent) !important;
 background: rgba(14, 232, 237, 0.14) !important;
 box-shadow: inset 0 0 10px rgba(14, 232, 237, 0.55) !important;
 transition: 0s !important;
}
.app-icon .icon-box {
 transition: background-color 0.5s ease-out, border-color 0.5s ease-out, box-shadow 0.5s ease-out !important;
}
.app-icon:active,
.app-icon.icon-pressed {
 background: transparent !important;
}
#install-app-launcher,
#install-dock-row .dock-label {
 opacity: 0.3;
 pointer-events: none;
 transition: opacity 0.4s ease, border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
}
#install-app-launcher {
 border-color: rgba(255,90,90,0.4);
 background: linear-gradient(135deg, rgba(255,90,90,0.14), rgba(0,0,0,0.68));
 color: #ff8a8a;
}
#install-dock-row .dock-label {
 border-color: rgba(255,90,90,0.4);
 background: linear-gradient(135deg, rgba(255,90,90,0.14), rgba(0,0,0,0.68));
 color: #ff8a8a;
 text-shadow: 0 0 10px rgba(255,90,90,0.35);
}
#install-dock-row .dock-label::after { background: linear-gradient(90deg, rgba(255,90,90,0.6), transparent); }
 body:not(.pwa-installable) #install-app-launcher,
 body:not(.pwa-installable) #install-dock-row .dock-label {
 box-shadow: 0 4px 14px rgba(0,0,0,0.35);
 transform: none;
}
@media (hover: hover) and (pointer: fine) {
 body:not(.pwa-installable) #install-dock-row:hover .dock-label,
 body:not(.pwa-installable) #install-dock-row:hover #install-app-launcher {
 border-color: #ff8a8a;
 background: linear-gradient(135deg, rgba(255,90,90,0.28), rgba(0,0,0,0.72));
 box-shadow: 0 0 16px rgba(255,90,90,0.45);
 transform: translateY(-1px);
}
}
 body.pwa-installable #install-app-launcher,
 body.pwa-installable #install-dock-row .dock-label {
 opacity: 1;
 pointer-events: auto;
}
 body.pwa-installable #install-app-launcher {
 border-color: rgba(14,232,237,0.35);
 background: linear-gradient(135deg, rgba(14,232,237,0.14), rgba(0,0,0,0.68));
 color: #eafdff;
}
 body.pwa-installable #install-dock-row .dock-label {
 border-color: rgba(14,232,237,0.35);
 background: linear-gradient(135deg, rgba(14,232,237,0.14), rgba(0,0,0,0.68));
 color: #eafdff;
 text-shadow: 0 0 10px rgba(14,232,237,0.35);
}
 body.pwa-installable #install-dock-row .dock-label::after { background: linear-gradient(90deg, rgba(14,232,237,0.6), transparent); }
@media (display-mode: standalone) {
#install-app-launcher,
#install-dock-row .dock-label {
 opacity: 0.3 !important;
 pointer-events: none !important;
 border-color: rgba(255,90,90,0.4) !important;
 background: linear-gradient(135deg, rgba(255,90,90,0.14), rgba(0,0,0,0.68)) !important;
 color: #ff8a8a !important;
}
#install-dock-row .dock-label::after { background: linear-gradient(90deg, rgba(255,90,90,0.6), transparent) !important; }
@media (hover: hover) and (pointer: fine) {
#install-dock-row:hover .dock-label,
#install-dock-row:hover #install-app-launcher {
 border-color: #ff8a8a !important;
 background: linear-gradient(135deg, rgba(255,90,90,0.28), rgba(0,0,0,0.72)) !important;
 box-shadow: 0 0 16px rgba(255,90,90,0.45) !important;
 transform: translateY(-1px) !important;
}
}
}
.hidden { display: none !important; }
.lang-btn { cursor: pointer; font-size: 10px; font-weight: 900; transition: color 0.3s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; padding: 8px 6px; margin: -8px -6px; }
.lang-sep { pointer-events: none; user-select: none; color: #999; }
.icon-svg { height: 2.5rem; }
*,*::before,*::after { 
-webkit-user-select:none; user-select:none; 
-webkit-touch-callout:none; caret-color:transparent; 
-webkit-tap-highlight-color:transparent; 
}
@keyframes spin-flr { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.fx5 { color:white; }
.fx6 { color:#0EE8ED; }
.fx7 { top: 25px; animation-delay: .05s; }
.fx13 { top: 73px; animation-delay: .12s; }
.fx14 { display: flex; background: rgba(0,0,0,0.6); border-radius: 50%; border: 1px solid var(--m-accent); cursor: pointer; color: white; backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.fx15 { width: 20px; height: 20px; }
.fx16 { color:#0EE8ED; }
.fx17 { color:white; }
.fx56 { flex-shrink: 0; }
.fx58 { font-size:9px; font-weight:900; color:#0EE8ED; border:1px solid rgba(14,232,237,0.5); border-radius:4px; padding:2px 6px; white-space:nowrap; display: flex; align-items: center; margin-right: 5px; }
.fx59 { display: flex; align-items: center; gap: 2px; overflow: visible; }
.fx60 { color: var(--m-accent); flex-shrink: 0; margin-left: auto; }
.fx62 { height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#fff;font-family:sans-serif;text-align:center;padding:20px;position:fixed;top:0;left:0;z-index:10000000; }
.fx63 { color:#ff4444;font-size:1.3rem; }
.fx64 { font-size:1.2rem; }
.fx65 { margin-top:20px;width:50px;height:50px;border:5px solid #333;border-top:5px solid #ff4444;border-radius:50%;animation:spin-flr 1s linear infinite; }
.fx66 { color:#fff; }
.fx67 { color:#fff; }
.cv-header-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.cv-taskbar-icon { width: 22px; height: 22px; }
.cv-app { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; width: 100%; box-sizing: border-box; }
.cv-export-bar { width: 100%; }
.cv-export-bar .cv-btn-export { margin-top: 4px; }
.cv-form { flex: 1 1 320px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.cv-section { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; min-width: 0; }
.cv-section:first-child { border-top: none; padding-top: 0; }
.cv-section-title { font-size: 12.5px; font-weight: 800; color: var(--m-accent); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.cv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cv-section-head .cv-section-title { margin-bottom: 0; }
.cv-grid { display: grid; gap: 12px; width: 100%; box-sizing: border-box; }
.cv-grid-2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cv-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cv-field-full { grid-column: 1 / -1; margin-top: 12px; }
.cv-label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.62); }
.cv-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 9px 11px; color: #fff; font-size: 13px; font-family: inherit; touch-action: manipulation; text-overflow: ellipsis; color-scheme: dark; caret-color: var(--m-accent); }
.cv-input-line { height: 38px; line-height: 1.2; resize: none; overflow: hidden; white-space: nowrap; }
.cv-input:focus { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(14,232,237,0.15); }
.cv-input option { color: #111; background: #fff; }
 select.cv-input,
.cv-input[type="date"],
.cv-input[type="month"] { cursor: pointer; }
.cv-input[type="date"]::-webkit-calendar-picker-indicator,
.cv-input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; }
.cv-textarea { resize: none; min-height: 64px; max-height: 500px; background: transparent; border: none; border-radius: 0; overflow-y: hidden; }
.cv-textarea:focus { border-color: transparent; box-shadow: none; }
.cv-textarea-wrap { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; overflow: hidden; position: relative; }
.cv-textarea-wrap:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(14,232,237,0.15); }
.cv-photo-section { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cv-photo-circle { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 2px dashed rgba(14,232,237,0.45); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; flex-shrink: 0; touch-action: manipulation; }
.cv-photo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-photo-placeholder-icon { width: 26px; height: 26px; color: rgba(255,255,255,0.4); }
.cv-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-hidden-input { display: none !important; }
.cv-btn { cursor: pointer; border-radius: 8px; font-weight: 700; font-size: 11.5px; padding: 8px 12px; border: 1px solid rgba(14,232,237,0.4); background: rgba(14,232,237,0.08); color: #eafdff; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .08s ease, border-color .08s ease, transform .05s ease; }
.cv-btn:focus-visible { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { .cv-btn:hover { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); } }
.cv-btn:active { background: rgba(14,232,237,0.3); border-color: rgba(14,232,237,0.9); transform: scale(0.96); }
.cv-btn-danger, .calc-btn-danger { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
.cv-btn.kbd-focus:not(.cv-btn-danger) { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); }
.cv-btn-danger.kbd-focus { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); }
.cv-btn-danger:focus-visible, .calc-btn-danger:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { .cv-btn-danger:hover, .calc-btn-danger:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
.cv-btn-danger:active, .calc-btn-danger:active, .calc-btn.calc-btn-danger.is-kbd-pressed { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
.cv-btn-add { white-space: nowrap; }
.cv-add-btn { position: relative; display: inline-grid; }
.cv-add-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.cv-add-btn .cv-add-default { opacity: 1; visibility: visible; pointer-events: auto; }
.cv-add-feedback { color: #7CFFB2; }
.cv-add-btn.is-added .cv-add-default { opacity: 0; visibility: hidden; pointer-events: none; }
.cv-add-btn.is-added .cv-add-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.cv-photo-upload-btn, .cv-photo-remove-btn { position: relative; display: inline-grid; }
.cv-photo-upload-btn > span, .cv-photo-remove-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.cv-photo-upload-btn .cv-photo-upload-default, .cv-photo-remove-btn .cv-photo-remove-default { opacity: 1; visibility: visible; pointer-events: auto; }
.cv-photo-upload-feedback { color: #7CFFB2; }
.cv-photo-upload-btn.is-uploaded { border-color: rgba(124,255,178,0.6) !important; background: rgba(124,255,178,0.12) !important; color: #7CFFB2 !important; }
.cv-photo-upload-btn.is-uploaded .cv-photo-upload-default { opacity: 0; visibility: hidden; pointer-events: none; }
.cv-photo-upload-btn.is-uploaded .cv-photo-upload-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.cv-photo-remove-btn.is-removed .cv-photo-remove-default { opacity: 0; visibility: hidden; pointer-events: none; }
.cv-photo-remove-btn.is-removed .cv-photo-remove-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.cv-photo-remove-btn.is-removed { border-color: rgba(255,90,90,0.7) !important; background: rgba(255,90,90,0.22) !important; color: #ff8a8a !important; }
.cv-photo-remove-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .cv-photo-remove-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); } }
.cv-photo-remove-btn.is-removed:disabled { opacity: 1; }
.cv-photo-upload-btn:disabled { opacity: .5; cursor: not-allowed; }
.qr-clear-btn { position: relative; display: inline-grid; }
.qr-clear-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.qr-clear-btn .qr-clear-default { opacity: 1; visibility: visible; pointer-events: auto; }
.qr-clear-btn.is-cleared .qr-clear-default { opacity: 0; visibility: hidden; pointer-events: none; }
.qr-clear-btn.is-cleared .qr-clear-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.qr-clear-btn.is-cleared { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.22); color: #ff8a8a; }
.qr-clear-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .qr-clear-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); } }
.qr-clear-btn.is-cleared:disabled { opacity: 1; }
.qr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.qr-toolbar-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.qr-toolbar-buttons .cv-btn { flex-shrink: 1; min-width: 0; }
@container (max-width: 380px) {
.qr-toolbar-buttons { gap: 5px; }
.qr-toolbar-buttons .cv-btn { padding: 7px 8px; font-size: 10px; }
}
@container (max-width: 300px) {
.qr-toolbar-buttons { gap: 4px; }
.qr-toolbar-buttons .cv-btn { padding: 6px 6px; font-size: 9px; border-radius: 6px; }
}
@container (max-width: 240px) {
.qr-toolbar-buttons { gap: 3px; }
.qr-toolbar-buttons .cv-btn { padding: 5px 4px; font-size: 8px; border-radius: 5px; }
}
.qr-copy-btn, .qr-paste-btn, .qr-undo-btn { position: relative; display: inline-grid; }
.qr-copy-btn > span, .qr-paste-btn > span, .qr-undo-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.qr-copy-btn .qr-copy-default, .qr-paste-btn .qr-paste-default, .qr-undo-btn .qr-undo-default { opacity: 1; visibility: visible; pointer-events: auto; }
.qr-copy-feedback, .qr-paste-feedback { color: #7CFFB2; }
.qr-undo-feedback { color: #ff8a8a; }
.qr-copy-btn.is-copied .qr-copy-default { opacity: 0; visibility: hidden; pointer-events: none; }
.qr-copy-btn.is-copied .qr-copy-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.qr-copy-btn.is-copied { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.qr-paste-btn.is-pasted .qr-paste-default { opacity: 0; visibility: hidden; pointer-events: none; }
.qr-paste-btn.is-pasted .qr-paste-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.qr-paste-btn.is-pasted { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.qr-undo-btn.is-undone .qr-undo-default { opacity: 0; visibility: hidden; pointer-events: none; }
.qr-undo-btn.is-undone .qr-undo-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.qr-undo-btn.is-undone { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.22); color: #ff8a8a; }
.qr-undo-btn:disabled, .qr-copy-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
.qr-copy-btn:disabled:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); }
.qr-undo-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); }
}
.qr-undo-btn.is-undone:disabled { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cv-photo-upload-btn:disabled:hover { background: transparent; border-color: rgba(14,232,237,0.4); } }
.cv-add-btn.is-added { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.cv-btn-export { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; font-size: 13px; margin-top: 4px; }
.cv-btn-export:disabled { opacity: .6; cursor: wait; }
.cv-btn-export:disabled:active { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); transform: none; }
@media (hover: hover) and (pointer: fine) { .cv-btn-export:disabled:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); transform: none; } }
.cv-repeat-list { display: flex; flex-direction: column; gap: 12px; }
.cv-row { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px 34px 14px 12px; position: relative; min-width: 0; }
.cv-row-remove { position: absolute; top: 8px; right: 8px; background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 4px; touch-action: manipulation; }
.cv-row-remove:focus-visible { color: #ff8a8a; background: rgba(255,90,90,0.12); border-radius: 6px; outline: none; }
@media (hover: hover) and (pointer: fine) { .cv-row-remove:hover { color: #ff8a8a; background: rgba(255,90,90,0.12); border-radius: 6px; } }
.cv-row-remove:active, .cv-row-remove.is-pressed { color: #ff8a8a; background: rgba(255,90,90,0.22); border-radius: 6px; transform: scale(0.92); }
.cv-row-check { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cv-skill-chip { display: flex; align-items: center; gap: 6px; background: rgba(14,232,237,0.1); border: 1px solid rgba(14,232,237,0.3); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 11.5px; max-width: 100%; }
.cv-skill-chip span { overflow-wrap: anywhere; }
.cv-skill-chip button { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; line-height: 1; padding: 2px; flex-shrink: 0; }
.cv-inline-add { display: flex; gap: 8px; }
.cv-inline-add .cv-input { flex: 1; min-width: 0; }
.cv-preview-pane { flex: 1 1 280px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.cv-preview-label { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .05em; }
.cv-preview-scroll { width: 100%; min-width: 0; }
.cv-preview-page { background: #ffffff; color: #1a1a1a; width: 100%; box-sizing: border-box; padding: 30px 28px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.cv-pv-header { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.15); flex-wrap: wrap; }
.cv-pv-photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #e8ecef; border: 2px solid rgba(0,0,0,0.12); }
.cv-pv-name { font-size: 20px; font-weight: 800; color: #101418; margin: 0; letter-spacing: .01em; }
.cv-pv-jobtitle { font-size: 12px; font-weight: 700; color: #333333; margin: 3px 0 0; text-transform: uppercase; letter-spacing: .03em; }
.cv-pv-contact { font-size: 10px; color: #444444; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.cv-pv-section { margin-top: 16px; }
.cv-pv-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #101418; border-bottom: 2px solid #101418; padding-bottom: 4px; margin-bottom: 9px; }
.cv-pv-entry { margin-bottom: 10px; }
.cv-pv-entry-title { font-weight: 700; color: #101418; }
.cv-pv-entry-sub { font-size: 10.5px; color: #555555; font-style: italic; }
.cv-pv-entry-desc { font-size: 10.5px; color: #333333; margin-top: 3px; white-space: pre-wrap; }
.cv-pv-brand { color: #999999; font-style: italic; font-size: 9.5px; margin-top: 18px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.12); }
.cv-pv-invalid-msg { color: #b3261e; font-size: 12px; font-weight: 600; text-align: center; padding: 24px 12px; }
.cv-pv-skills { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-pv-skill { background: #f1f3f5; border: 1px solid #d8dcdf; color: #1a1a1a; border-radius: 5px; padding: 4px 9px; font-size: 10px; }
@media (max-width: 640px) {
.presentation-content { padding: 16px; }
.cv-app { gap: 16px; }
.cv-preview-page { padding: 16px; }
.cv-grid-2 { grid-template-columns: 1fr; }
.cv-inline-add { flex-wrap: wrap; }
}
.cv-input-invalid { border-color: #e5484d !important; }
.cv-close-x { color: #ff8a8a; transition: color .1s ease; }
@media (hover: hover) and (pointer: fine) { .cv-close-x:hover { color: #B91C1C; } }
.cv-close-x.is-hovered, .cv-close-x:active { color: #B91C1C; }
@keyframes cv-shake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.cv-shake { animation: cv-shake .4s; }
#cv-print-sheet { display: none; }
@media print {
@page { size: A4; margin: 12mm; }
 html, body { background: #ffffff !important; height: auto !important; width: auto !important; overflow: visible !important; }
 body > *:not(#cv-print-sheet) { display: none !important; }
#cv-print-sheet {
 display: block !important;
 position: static !important;
 background: #ffffff !important;
 color: #1a1a1a !important;
 width: 100% !important;
 max-width: 100% !important;
 box-sizing: border-box !important;
 margin: 0 !important;
 padding: 0 !important;
 box-shadow: none !important;
 border-radius: 0 !important;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 1.55;
 overflow-wrap: anywhere;
 overflow: visible !important;
-webkit-print-color-adjust: exact;
 print-color-adjust: exact;
}
#cv-print-sheet * {
-webkit-print-color-adjust: exact;
 print-color-adjust: exact;
}
#cv-print-sheet .cv-pv-header { break-inside: avoid; }
#cv-print-sheet .cv-pv-entry { break-inside: avoid; }
#cv-print-sheet .cv-pv-brand { break-inside: avoid; }
}
.notepad-app { display: flex; flex-direction: column; height: 100%; gap: 12px; }
.notepad-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.notepad-toolbar-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.notepad-toolbar-buttons .cv-btn { flex-shrink: 1; min-width: 0; }
@container (max-width: 380px) {
.notepad-toolbar-buttons { gap: 5px; }
.notepad-toolbar-buttons .cv-btn { padding: 7px 8px; font-size: 10px; }
}
@container (max-width: 300px) {
.notepad-toolbar-buttons { gap: 4px; }
.notepad-toolbar-buttons .cv-btn { padding: 6px 6px; font-size: 9px; border-radius: 6px; }
}
@container (max-width: 240px) {
.notepad-toolbar-buttons { gap: 3px; }
.notepad-toolbar-buttons .cv-btn { padding: 5px 4px; font-size: 8px; border-radius: 5px; }
}
.notepad-copy-btn, .notepad-paste-btn, .notepad-clear-btn, .notepad-undo-btn { position: relative; display: inline-grid; }
.notepad-copy-btn > span, .notepad-paste-btn > span, .notepad-clear-btn > span, .notepad-undo-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.notepad-copy-btn .notepad-copy-default, .notepad-paste-btn .notepad-paste-default, .notepad-clear-btn .notepad-clear-default, .notepad-undo-btn .notepad-undo-default { opacity: 1; visibility: visible; pointer-events: auto; }
.notepad-copy-feedback, .notepad-paste-feedback { color: #7CFFB2; }
.notepad-clear-feedback, .notepad-undo-feedback { color: #ff8a8a; }
.notepad-copy-btn.is-copied .notepad-copy-default { opacity: 0; visibility: hidden; pointer-events: none; }
.notepad-copy-btn.is-copied .notepad-copy-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.notepad-copy-btn.is-copied { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.notepad-paste-btn.is-pasted .notepad-paste-default { opacity: 0; visibility: hidden; pointer-events: none; }
.notepad-paste-btn.is-pasted .notepad-paste-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.notepad-paste-btn.is-pasted { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.notepad-clear-btn.is-cleared .notepad-clear-default { opacity: 0; visibility: hidden; pointer-events: none; }
.notepad-clear-btn.is-cleared .notepad-clear-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.notepad-clear-btn.is-cleared { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.22); color: #ff8a8a; }
.notepad-undo-btn.is-undone .notepad-undo-default { opacity: 0; visibility: hidden; pointer-events: none; }
.notepad-undo-btn.is-undone .notepad-undo-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.notepad-undo-btn.is-undone { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.22); color: #ff8a8a; }
.notepad-undo-btn:disabled, .notepad-copy-btn:disabled, .notepad-clear-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
.notepad-copy-btn:disabled:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); }
.notepad-undo-btn:disabled:hover, .notepad-clear-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); }
}
.notepad-clear-btn.is-cleared:disabled, .notepad-undo-btn.is-undone:disabled { opacity: 1; }
.notepad-clear-btn, .notepad-undo-btn { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
.notepad-clear-btn:focus-visible, .notepad-undo-btn:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { .notepad-clear-btn:hover, .notepad-undo-btn:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
.notepad-clear-btn:active, .notepad-undo-btn:active { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
.notepad-textarea-wrap { flex: 1 1 auto; width: 100%; min-height: 120px; box-sizing: border-box; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; overflow: hidden; }
.notepad-textarea-wrap:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(14,232,237,0.15); }
.notepad-textarea { display: block; width: 100%; height: 100%; min-height: 120px; resize: none; box-sizing: border-box; background: transparent; border: none; border-radius: 0; padding: 16px; color: #fff; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.65; touch-action: manipulation; color-scheme: dark; caret-color: var(--m-accent); }
.notepad-charcount { align-self: flex-end; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: rgba(234,253,255,0.5); margin-top: -6px; transition: color .15s ease; }
.notepad-charcount.is-max { color: #ff6b6b; }
.notepad-textarea:focus { outline: none; box-shadow: none; border-color: transparent; }
.notepad-textarea.notepad-blur-instant { transition: none !important; filter: blur(10px); color: transparent; text-shadow: none; caret-color: transparent; }
.fonttext-app { display: flex; flex-direction: column; gap: 12px; }
.fonttext-app .cv-section-title { margin-bottom: -2px; }
.fonttext-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fonttext-toolbar-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.fonttext-toolbar-buttons .cv-btn { flex-shrink: 1; min-width: 0; }
@container (max-width: 380px) {
.fonttext-toolbar-buttons { gap: 5px; }
.fonttext-toolbar-buttons .cv-btn { padding: 7px 8px; font-size: 10px; }
}
@container (max-width: 300px) {
.fonttext-toolbar-buttons { gap: 4px; }
.fonttext-toolbar-buttons .cv-btn { padding: 6px 6px; font-size: 9px; border-radius: 6px; }
}
@container (max-width: 240px) {
.fonttext-toolbar-buttons { gap: 3px; }
.fonttext-toolbar-buttons .cv-btn { padding: 5px 4px; font-size: 8px; border-radius: 5px; }
}
.fonttext-copy-btn, .fonttext-paste-btn, .fonttext-clear-btn, .fonttext-undo-btn { position: relative; display: inline-grid; }
.fonttext-copy-btn > span, .fonttext-paste-btn > span, .fonttext-clear-btn > span, .fonttext-undo-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-copy-btn .fonttext-copy-default, .fonttext-paste-btn .fonttext-paste-default, .fonttext-clear-btn .fonttext-clear-default, .fonttext-undo-btn .fonttext-undo-default { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-copy-feedback, .fonttext-paste-feedback { color: #7CFFB2; }
.fonttext-clear-feedback, .fonttext-undo-feedback { color: #ff8a8a; }
.fonttext-copy-btn.is-copied .fonttext-copy-default { opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-copy-btn.is-copied .fonttext-copy-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-copy-btn.is-copied { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.fonttext-paste-btn.is-pasted .fonttext-paste-default { opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-paste-btn.is-pasted .fonttext-paste-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-paste-btn.is-pasted { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.fonttext-clear-btn.is-cleared .fonttext-clear-default { opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-clear-btn.is-cleared .fonttext-clear-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-clear-btn.is-cleared { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.22); color: #ff8a8a; }
.fonttext-undo-btn.is-undone .fonttext-undo-default { opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-undo-btn.is-undone .fonttext-undo-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-undo-btn.is-undone { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.22); color: #ff8a8a; }
.fonttext-undo-btn:disabled, .fonttext-copy-btn:disabled, .fonttext-clear-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
.fonttext-copy-btn:disabled:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); }
.fonttext-undo-btn:disabled:hover, .fonttext-clear-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); }
}
.fonttext-clear-btn.is-cleared:disabled, .fonttext-undo-btn.is-undone:disabled { opacity: 1; }
.fonttext-clear-btn, .fonttext-undo-btn { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
.fonttext-clear-btn:focus-visible, .fonttext-undo-btn:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { .fonttext-clear-btn:hover, .fonttext-undo-btn:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
.fonttext-clear-btn:active, .fonttext-undo-btn:active { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
.fonttext-textarea-wrap { flex: 0 0 auto; width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; overflow: hidden; }
.fonttext-textarea-wrap:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(14,232,237,0.15); }
.fonttext-textarea { display: block; flex: 0 0 auto; resize: none; box-sizing: border-box; width: 100%; background: transparent; border: none; border-radius: 0; padding: 9px 11px; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; touch-action: manipulation; color-scheme: dark; caret-color: var(--m-accent); overflow-y: hidden; min-height: 72px; max-height: 55vh; }
.fonttext-textarea:focus { outline: none; box-shadow: none; border-color: transparent; }
.fonttext-charcount { align-self: flex-end; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: rgba(234,253,255,0.5); margin-top: -6px; transition: color .15s ease; }
.fonttext-charcount.is-max { color: #ff6b6b; }
.qr-charcount { display: block; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: rgba(234,253,255,0.5); margin-top: 6px; transition: color .15s ease; }
.qr-charcount.is-max { color: #ff6b6b; }
.cv-charcount { display: block; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: rgba(234,253,255,0.5); margin-top: 6px; transition: color .15s ease; }
.cv-charcount.is-max { color: #ff6b6b; }
.fonttext-results-list { display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.fonttext-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; }
.fonttext-row-body { flex: 1 1 auto; min-width: 0; }
.fonttext-row-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--m-accent); margin-bottom: 4px; }
.fonttext-row-preview { font-size: 15px; color: #fff; word-break: break-word; line-height: 1.4; }
.fonttext-row-copy-btn { position: relative; display: inline-grid; flex-shrink: 0; }
.fonttext-row-copy-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-row-copy-btn .fonttext-row-copy-default { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-row-copy-feedback { color: #7CFFB2; }
.fonttext-row-copy-btn.is-copied .fonttext-row-copy-default { opacity: 0; visibility: hidden; pointer-events: none; }
.fonttext-row-copy-btn.is-copied .fonttext-row-copy-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.fonttext-row-copy-btn.is-copied { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.charmap-app { display: flex; flex-direction: column; gap: 12px; }
.charmap-results-list { display: flex; flex-direction: column; padding-right: 2px; }
.charmap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.charmap-row-preview { font-size: 22px; font-weight: 700; color: var(--m-accent); line-height: 1.4; }
.charmap-row-copy-btn { position: relative; display: inline-grid; flex-shrink: 0; }
.charmap-row-copy-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.charmap-row-copy-btn .charmap-row-copy-default { opacity: 1; visibility: visible; pointer-events: auto; }
.charmap-row-copy-feedback { color: #7CFFB2; }
.charmap-row-copy-btn.is-copied .charmap-row-copy-default { opacity: 0; visibility: hidden; pointer-events: none; }
.charmap-row-copy-btn.is-copied .charmap-row-copy-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.charmap-row-copy-btn.is-copied { border-color: rgba(124,255,178,0.6); background: rgba(124,255,178,0.12); }
.cv-input, .notepad-textarea { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }
.notepad-confirm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; box-sizing: border-box; }
.notepad-confirm-overlay.hidden { display: none !important; }
.notepad-confirm-box { background: #0f1216; border: 1px solid rgba(14,232,237,0.35); border-radius: 12px; padding: 20px; max-width: 320px; width: 100%; box-shadow: 0 25px 60px rgba(0,0,0,0.75); }
.notepad-confirm-text { color: #eafdff; font-size: 13px; line-height: 1.55; margin: 0 0 16px; }
.notepad-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 640px) {
.notepad-textarea { padding: 12px; font-size: 13px; }
.notepad-confirm-box { padding: 16px; }
}
.notepad-pin-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.82); backdrop-filter: blur(4px); z-index: 90; box-sizing: border-box; overflow: hidden; }
.notepad-pin-overlay.hidden { display: none !important; }
.notepad-pin-box, .notepad-pin-reset-box { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); background: #0f1216; border: 1px solid rgba(14,232,237,0.35); border-radius: 12px; padding: 22px 20px; width: 320px; box-shadow: 0 25px 60px rgba(0,0,0,0.75); box-sizing: border-box; }
.notepad-pin-reset-box.hidden { display: none !important; }
.notepad-pin-text { color: #eafdff; font-size: 13px; line-height: 1.4; margin: 0 0 14px; text-align: center; }
.notepad-pin-text.hidden { display: none !important; }
.notepad-pin-error { color: #ff8a8a; font-size: 12px; line-height: 1.4; text-align: center; margin: 0 0 12px; min-height: 0; }
.notepad-pin-error.hidden { display: none !important; }
.notepad-pin-error span.hidden { display: none !important; }
.notepad-pin-lang-stack { display: grid; }
.notepad-pin-lang-stack > span { grid-area: 1 / 1; }
.notepad-pin-error .notepad-pin-lang-stack > span.hidden { display: block !important; visibility: hidden; }
.notepad-pin-body { position: relative; }
.notepad-pin-box.is-pin-busy .notepad-pin-dots, .notepad-pin-box.is-pin-busy .notepad-pin-keypad, .notepad-pin-box.is-pin-busy .notepad-pin-forgot, .notepad-pin-box.is-pin-busy .notepad-pin-text { visibility: hidden; pointer-events: none; }
.notepad-pin-stop { position: absolute; inset: 0; display: none; pointer-events: none; background: url('iconite/Stop.svg') center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255,90,90,0.35)); }
.notepad-pin-box.is-pin-busy .notepad-pin-stop { display: flex; }
.notepad-pin-box.is-pin-busy { border-color: rgba(255,90,90,0.4); }
.notepad-pin-box.is-pin-wiped { border-color: rgba(255,90,90,0.55); }
.notepad-pin-box.is-pin-wiped .notepad-pin-stop { background-image: url('iconite/CosGunoi.svg'); }
.notepad-pin-box.is-pin-ok { border-color: rgba(74,222,128,0.55); }
.notepad-pin-box.is-pin-ok .notepad-pin-stop { background-image: url('iconite/Bifa.svg'); filter: drop-shadow(0 0 6px rgba(74,222,128,0.35)); }
.notepad-pin-error.is-ok { color: #6ee79a; }
.notepad-pin-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.notepad-pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(14,232,237,0.5); background: rgba(255,255,255,0.04); transition: background .15s ease, border-color .15s ease, transform .1s ease; flex-shrink: 0; }
.notepad-pin-dot.is-filled { background: var(--m-accent); border-color: var(--m-accent); box-shadow: 0 0 8px rgba(14,232,237,0.6); }
.notepad-pin-dots.is-shake { animation: notepad-pin-shake .3s ease; }
@keyframes notepad-pin-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.notepad-pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.notepad-pin-key { cursor: pointer; border-radius: 10px; font-weight: 700; font-size: 16px; padding: 13px 0; border: 1px solid rgba(14,232,237,0.4); background: rgba(14,232,237,0.08); color: #eafdff; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .06s ease, border-color .06s ease, transform .05s ease; }
.notepad-pin-key:focus-visible { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { .notepad-pin-key:hover { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); } }
.notepad-pin-key:active, .notepad-pin-key.is-pressed { background: rgba(14,232,237,0.3); border-color: rgba(14,232,237,0.9); transform: scale(0.96); }
.notepad-pin-key-del { font-size: 10px; font-weight: 700; border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
.notepad-pin-key-del:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { .notepad-pin-key-del:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
.notepad-pin-key-del:active { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
.notepad-pin-key-ok { color: var(--m-accent); }
.notepad-pin-forgot { display: block; margin: 14px auto 0; background: none; border: none; color: rgba(234,253,255,0.6); font-size: 11px; text-decoration: underline; cursor: pointer; text-align: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.notepad-pin-forgot:focus-visible { color: var(--m-accent); outline: none; }
@media (hover: hover) and (pointer: fine) { .notepad-pin-forgot:hover { color: var(--m-accent); } }
.notepad-pin-forgot.hidden { display: none !important; }
.app-icon .icon-box { position: relative; }
.lock-host { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
.lock-badge { position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)); }
.app-icon .lock-badge { right: 7px; bottom: 5px; width: 22px; height: 22px; }
.lock-host-h .lock-badge { right: -3px; bottom: -3px; width: 10px; height: 10px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.65)); }
.lock-host-t .lock-badge { right: -4px; bottom: -4px; width: 13px; height: 13px; }
 html[data-np-lock="locked"] .lock-badge { background-image: url('iconite/LacatInchis.svg'); }
 html[data-np-lock="open"] .lock-badge { background-image: url('iconite/LacatDeschis.svg'); }
#vk-win-presentation, #vk-win-notepad, #vk-win-qr, #vk-win-fonttext { position:fixed; background:#0f1115; border:1px solid var(--m-accent); border-radius:12px; display:none; flex-direction:column; box-shadow:0 25px 50px rgba(0,0,0,.9); z-index:999999; width:92%; max-width:480px; overflow:hidden; touch-action:none; user-select:none; }
.vk-header { height:32px; background:#000; display:flex; justify-content:space-between; align-items:center; padding:0 10px; cursor:move; }
.vk-title { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:900; color:var(--m-accent); }
.vk-close-x { background:none; border:none; color:#ff8a8a; cursor:pointer; padding:2px; display:flex; transition: color .1s ease; }
@media (hover: hover) and (pointer: fine) { .vk-close-x:hover { color: #B91C1C; } }
.vk-close-x.is-hovered, .vk-close-x:active { color: #B91C1C; }
.vk-body { padding:4px; background:#0a0c10; }
.vk-row { display:flex; justify-content:center; gap:2px; margin-bottom:2px; }
.vk-key { background:rgba(14,232,237,.07); border:1px solid rgba(14,232,237,.25); color:#fff; border-radius:4px; height:28px; flex:1; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; cursor:pointer; transition:all .05s; -webkit-tap-highlight-color:transparent; }
.vk-key:active, .vk-key.vk-pressed { background:var(--m-accent)!important; color:#00292b!important; transform:scale(.92); }
.vk-key.vk-back { flex:1.4; font-size:16px; background:rgba(255,90,90,.1); border-color:rgba(255,90,90,.35); color:#ff8a8a; }
.vk-key.vk-back:active, .vk-key.vk-back.vk-pressed { background:rgba(255,90,90,.85)!important; border-color:rgba(255,90,90,.9)!important; color:#2a0505!important; }
.vk-key.vk-space { flex:4; background:rgba(14,232,237,.1); border-color:var(--m-accent); }
.vk-key.vk-ctrl { flex:1.5; color:var(--m-accent); }
.vk-key.vk-shift { flex:1.3; font-size:15px; }
.vk-key.vk-enter { flex:1.3; font-size:15px; }
.vk-key.vk-key-active { background:var(--m-accent)!important; color:#00292b!important; }
@media (hover:hover) { .vk-key.vk-back:hover { background:rgba(255,90,90,.2); border-color:rgba(255,90,90,.6); } }
.vk-diacritic-popup { position:fixed; display:flex; gap:4px; background:#0f1115; border:1px solid var(--m-accent); border-radius:8px; padding:4px; z-index:1000001; box-shadow:0 12px 30px rgba(0,0,0,.75); }
.vk-diacritic-opt { min-width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:#fff; border-radius:6px; background:rgba(14,232,237,.08); border:1px solid rgba(14,232,237,.25); }
.vk-diacritic-opt.vk-diacritic-opt-active { background:var(--m-accent); color:#00292b; }
.calc-fit-outer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.calc-app { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: 440px; }
.calc-display { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; width: 100%; height: 150px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 14px 18px; box-sizing: border-box; overflow: hidden; }
.calc-expr { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; color: #fff; white-space: nowrap; overflow-x: auto; max-width: 100%; text-align: right; letter-spacing: .01em; scrollbar-width: none; font-size: 26px; }
.calc-expr::-webkit-scrollbar { display: none; }
.calc-expr.hidden { display: none !important; }
.calc-error { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #ff8a8a; font-size: 22px; font-weight: 700; text-align: right; width: 100%; }
.calc-error.hidden { display: none !important; }
.calc-pad { flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); grid-template-areas: "ac bs div mul" "n7 n8 n9 sub" "n4 n5 n6 add" "n1 n2 n3 eq" "n0 n0 dot eq"; gap: 10px; }
.calc-btn { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 22px; transition: background .06s ease, border-color .06s ease, transform .05s ease; }
.calc-btn:focus-visible:not(:active) { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); }
.calc-btn-danger:focus-visible:not(:active) { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); }
@media (hover: hover) and (pointer: fine) {
.calc-btn:hover:not(:active) { background: rgba(14,232,237,0.18); border-color: rgba(14,232,237,0.7); }
.calc-btn-danger:hover:not(:active) { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); }
}
@media screen and (orientation: landscape) {
.calc-app { flex-direction: row; align-items: stretch; justify-content: center; width: 760px; height: 224px; gap: 14px; }
.calc-display { flex: 0 0 430px; width: 430px; height: 100%; align-items: center; }
.calc-pad { flex: 0 0 316px; width: 316px; height: 100%; aspect-ratio: auto; gap: 8px; }
.calc-btn { font-size: 17px; }
}
.calc-btn.is-kbd-pressed { background: rgba(14,232,237,0.3); border-color: rgba(14,232,237,0.9); transform: scale(0.96); }
.calc-icon { width: 40%; height: 40%; }
.calc-key-ac { grid-area: ac; }
.calc-key-bs { grid-area: bs; }
.calc-key-div { grid-area: div; }
.calc-key-mul { grid-area: mul; }
.calc-key-7 { grid-area: n7; }
.calc-key-8 { grid-area: n8; }
.calc-key-9 { grid-area: n9; }
.calc-key-sub { grid-area: sub; }
.calc-key-4 { grid-area: n4; }
.calc-key-5 { grid-area: n5; }
.calc-key-6 { grid-area: n6; }
.calc-key-add { grid-area: add; }
.calc-key-1 { grid-area: n1; }
.calc-key-2 { grid-area: n2; }
.calc-key-3 { grid-area: n3; }
.calc-key-eq { grid-area: eq; }
.calc-key-0 { grid-area: n0; }
.calc-key-dot { grid-area: dot; }
.calc-presentation-content { overflow: hidden !important; }
.calendar-presentation-content { overflow: hidden !important; }
.calendar-fit-outer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.calendar-app { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; width: 360px; box-sizing: border-box; padding: 20px 22px 22px; background: linear-gradient(160deg, rgba(14,232,237,0.07), rgba(15,18,22,0.98)); border: 1px solid rgba(14,232,237,0.4); border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,232,237,0.1); }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.calendar-nav-btn { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; font-size: 13px; }
.calendar-nav-btn:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .calendar-nav-btn:disabled:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); } }
.calendar-title { flex: 1 1 auto; text-align: center; font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; }
.calendar-weekdays span { text-align: center; font-size: 11px; font-weight: 700; color: rgba(234,253,255,0.55); text-transform: uppercase; letter-spacing: .03em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: 6px; width: 100%; aspect-ratio: 7 / 6; }
.calendar-day { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 600; color: #eafdff; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.calendar-day--pad { background: transparent; border-color: transparent; cursor: default; }
.calendar-day--marked { background: linear-gradient(135deg,#0EE8ED,#08b6ba); color: #002021; border-color: transparent; box-shadow: 0 0 12px rgba(14,232,237,0.5); }
.calendar-day--checkpoint { background: linear-gradient(135deg,#22e07a,#0f9b4f); color: #04150a; border-color: transparent; box-shadow: 0 0 12px rgba(34,224,122,0.55); }
.calendar-day--marked.calendar-day--checkpoint { background: linear-gradient(135deg,#0EE8ED,#08b6ba); color: #04150a; }
.calendar-day--marked.calendar-day--checkpoint::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(34,224,122,0.88), rgba(15,155,79,0.88)); box-shadow: 0 0 14px rgba(34,224,122,0.65); animation: calendar-checkpoint-glow 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes calendar-checkpoint-glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.calendar-day--weekend:not(.calendar-day--marked):not(.calendar-day--checkpoint) { color: rgba(234,253,255,0.38); }
.calendar-anim { animation: calendar-fade .18s ease; }
@keyframes calendar-fade { from { opacity: .35; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.calendar-year-btn { font-size: 15px; letter-spacing: 0; }
.calendar-year-close { border-color: rgba(34,224,122,0.65); background: rgba(34,224,122,0.10); color: #eafdff; }
@media (hover: hover) and (pointer: fine) { .calendar-year-close:hover { background: rgba(34,224,122,0.18); border-color: rgba(34,224,122,0.85); } }
.calendar-year-close.is-hovered, .calendar-year-close:active { background: rgba(34,224,122,0.22); border-color: rgba(34,224,122,0.9); }
.calendar-year-overlay { position: absolute; inset: 0; background: transparent; z-index: 20; box-sizing: border-box; overflow: hidden; visibility: visible; }
.calendar-year-overlay.hidden { display: none !important; }
.calendar-app--year-open { visibility: hidden; }
.calendar-year-app { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; width: 460px; box-sizing: border-box; padding: 18px 20px 20px; background: linear-gradient(160deg, rgba(14,232,237,0.07), rgba(15,18,22,0.98)); border: 1px solid rgba(14,232,237,0.4); border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,232,237,0.1); }
.calendar-year-header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.calendar-year-title { flex: 1 1 auto; text-align: center; font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .01em; }
.calendar-year-close { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.calendar-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.calendar-year-month { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.calendar-year-month--current { border-color: rgba(14,232,237,0.55); box-shadow: 0 0 10px rgba(14,232,237,0.3); }
.calendar-year-month--current-cp { border-color: rgba(34,224,122,0.65); box-shadow: 0 0 10px rgba(34,224,122,0.35); }
.calendar-year-month--current-cp-today { animation: calendar-year-month-glow 1.8s ease-in-out infinite; }
@keyframes calendar-year-month-glow { 0%, 100% { border-color: rgba(14,232,237,0.55); box-shadow: 0 0 10px rgba(14,232,237,0.3); } 50% { border-color: rgba(34,224,122,0.8); box-shadow: 0 0 14px rgba(34,224,122,0.55); } }
@media (hover: hover) and (pointer: fine) { .calendar-year-month:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); } }
.calendar-year-month-name { font-size: 11px; font-weight: 700; color: #eafdff; text-transform: capitalize; width: 100%; text-align: center; line-height: 1.15; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.calendar-year-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5px; width: 100%; }
.calendar-year-weekdays span { font-size: 6px; font-weight: 700; text-align: center; color: rgba(234,253,255,0.5); text-transform: uppercase; line-height: 1.4; }
.calendar-year-month-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5px; width: 100%; }
.calendar-year-day { font-size: 7px; line-height: 1.5; text-align: center; color: #eafdff; }
.calendar-year-day--pad { visibility: hidden; }
.calendar-year-day--weekend { color: rgba(234,253,255,0.38); }
.calendar-year-day--today { color: #0EE8ED; font-weight: 800; text-shadow: 0 0 6px rgba(14,232,237,0.6); }
.calendar-year-day--checkpoint { color: #22e07a; font-weight: 800; text-shadow: 0 0 6px rgba(34,224,122,0.6); }
.calendar-year-day--today.calendar-year-day--checkpoint { color: #22e07a; text-shadow: 0 0 6px rgba(34,224,122,0.75); }
@media screen and (orientation: landscape) {
.calendar-app { width: 420px; gap: 10px; padding: 14px 18px 16px; border-radius: 14px; }
.calendar-nav-btn { width: 32px; height: 32px; }
.calendar-title { font-size: 15px; }
.calendar-day { font-size: 12px; border-radius: 6px; }
.calendar-year-app { width: 620px; padding: 14px 18px 16px; gap: 10px; }
.calendar-year-grid { grid-template-columns: repeat(4, 1fr); }
.calendar-year-title { font-size: 15px; }
.calendar-year-close { width: 32px; height: 32px; }
}
.apps-scroll { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); justify-items: center; align-content: flex-start; gap: 16px; width: 100%; }
.apps-scroll .app-icon { margin-bottom: 0; }
.apps-scroll .app-icon .icon-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
.apps-scroll .app-icon > span { line-height: 16px; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
.crono-presentation-content { overflow: hidden !important; }
.crono-fit-outer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.crono-app { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; width: 360px; box-sizing: border-box; padding: 30px 26px 26px; background: linear-gradient(160deg, rgba(14,232,237,0.07), rgba(15,18,22,0.98)); border: 1px solid rgba(14,232,237,0.4); border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,232,237,0.1); transition: border-color .25s ease, box-shadow .25s ease; }
.crono-display { font-family: 'Consolas', 'Courier New', monospace; font-weight: 800; font-size: 46px; letter-spacing: .04em; color: #eafdff; text-shadow: 0 0 16px rgba(14,232,237,0.35); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s ease, text-shadow .25s ease; }
.crono-app.is-running .crono-display { color: #eafff3; text-shadow: 0 0 18px rgba(124,255,178,0.55); }
.crono-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; width: 100%; }
.crono-btn { position: relative; min-width: 0; width: 100%; padding: 9px 4px; font-size: 10.5px; letter-spacing: 0; overflow: hidden; display: inline-grid; justify-items: center; }
.crono-btn > span { grid-row: 1; grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.crono-btn .crono-btn-default { opacity: 1; visibility: visible; pointer-events: auto; }
.crono-btn.is-resume .crono-btn-default { opacity: 0; visibility: hidden; pointer-events: none; }
.crono-btn.is-resume .crono-btn-resume-default { opacity: 1; visibility: visible; pointer-events: auto; }
.crono-btn.is-flash .crono-btn-default, .crono-btn.is-flash .crono-btn-resume-default,
.crono-btn.is-on .crono-btn-default, .crono-btn.is-on .crono-btn-resume-default { opacity: 0; visibility: hidden; pointer-events: none; }
.crono-btn.is-flash:not(.is-resume) .crono-btn-feedback,
.crono-btn.is-on:not(.is-resume) .crono-btn-feedback { opacity: 1; visibility: visible; pointer-events: auto; }
.crono-btn.is-flash.is-resume .crono-btn-feedback-resume,
.crono-btn.is-on.is-resume .crono-btn-feedback-resume { opacity: 1; visibility: visible; pointer-events: auto; }
.crono-btn.is-flash, .crono-btn.is-on { border-color: rgba(124,255,178,0.6) !important; background: rgba(124,255,178,0.12) !important; color: #7CFFB2 !important; }
.crono-btn.is-flash .crono-btn-feedback, .crono-btn.is-flash .crono-btn-feedback-resume,
.crono-btn.is-on .crono-btn-feedback, .crono-btn.is-on .crono-btn-feedback-resume { color: #7CFFB2; }
.crono-btn:disabled { opacity: .5; cursor: not-allowed; }
.crono-btn.is-flash:disabled { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .crono-btn:disabled:hover { background: rgba(14,232,237,0.08); border-color: rgba(14,232,237,0.4); } }
#crono-stop-btn, #crono-reset-btn { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
#crono-stop-btn:focus-visible, #crono-reset-btn:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { #crono-stop-btn:hover, #crono-reset-btn:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
#crono-stop-btn:active, #crono-reset-btn:active { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { #crono-stop-btn:disabled:hover, #crono-reset-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); } }
#crono-stop-btn.is-flash, #crono-reset-btn.is-flash { border-color: rgba(255,90,90,0.7) !important; background: rgba(255,90,90,0.22) !important; color: #ff8a8a !important; }
#crono-stop-btn.is-flash .crono-btn-feedback, #crono-reset-btn.is-flash .crono-btn-feedback { color: #ff8a8a; }
@media screen and (orientation: landscape) {
.crono-app { width: 420px; padding: 22px 26px 24px; gap: 14px; border-radius: 14px; }
.crono-display { font-size: 38px; }
.crono-controls { gap: 8px; }
.crono-btn { padding: 8px 6px; font-size: 11px; }
}
.voice-presentation-content { overflow: hidden !important; }
.voice-fit-outer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.voice-app { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; width: 360px; box-sizing: border-box; padding: 30px 26px 26px; background: linear-gradient(160deg, rgba(14,232,237,0.07), rgba(15,18,22,0.98)); border: 1px solid rgba(14,232,237,0.4); border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,232,237,0.1); transition: border-color .25s ease, box-shadow .25s ease; }
.voice-display { font-family: 'Consolas', 'Courier New', monospace; font-weight: 800; font-size: 46px; letter-spacing: .04em; color: #eafdff; text-shadow: 0 0 16px rgba(14,232,237,0.35); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s ease, text-shadow .25s ease; }
.voice-app.is-recording .voice-display { color: #eafff3; text-shadow: 0 0 18px rgba(124,255,178,0.55); }
.voice-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; width: 100%; }
.voice-btn { position: relative; min-width: 0; width: 100%; padding: 9px 4px; font-size: 10.5px; letter-spacing: 0; overflow: hidden; display: inline-grid; justify-items: center; white-space: nowrap; }
#voice-stop-btn { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
#voice-stop-btn:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { #voice-stop-btn:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
#voice-stop-btn:active { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { #voice-stop-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); } }
#voice-stop-btn.is-flash { border-color: rgba(255,90,90,0.7) !important; background: rgba(255,90,90,0.22) !important; color: #ff8a8a !important; }
#voice-stop-btn.is-flash .crono-btn-feedback { color: #ff8a8a; }
@media screen and (orientation: landscape) {
.voice-app { width: 420px; padding: 22px 26px 24px; gap: 14px; border-radius: 14px; }
.voice-display { font-size: 38px; }
.voice-controls { gap: 8px; }
.voice-btn { padding: 8px 6px; font-size: 11px; }
}
.sunete-presentation-content { overflow: hidden !important; }
.sunete-fit-outer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sunete-app { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px; width: 408px; box-sizing: border-box; padding: 26px 26px 24px; background: linear-gradient(160deg, rgba(14,232,237,0.07), rgba(15,18,22,0.98)); border: 1px solid rgba(14,232,237,0.4); border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,232,237,0.1); }
.sn-cat { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.sn-cat-head { display: flex; align-items: center; }
.sn-cat-label { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 800; font-size: 13.5px; letter-spacing: .01em; color: #ff8a8a; transition: color .3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sn-cat-label.is-on { color: #0EE8ED; }
.sn-grid { position: relative; width: 100%; height: 30px; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn-grid-track { position: absolute; left: 15px; right: 15px; top: 50%; height: 3px; background: rgba(255,255,255,0.14); border-radius: 2px; transform: translateY(-50%); overflow: hidden; }
.sn-grid-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg,#ff8a8a,#0EE8ED); border-radius: 2px; transition: width .22s ease; }
.sn-grid-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.sn-dot { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sn-dot::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.32); box-sizing: border-box; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
@media (hover: hover) and (pointer: fine) { .sunete-app:not(.sn-nohover) .sn-dot:hover::before { border-color: rgba(14,232,237,0.7); } .sunete-app:not(.sn-nohover) .sn-dot[data-pos="0"]:hover::before { border-color: rgba(255,90,90,0.8); } .sunete-app.is-playing:not(.sn-nohover) .sn-dot:not([data-pos="0"]):hover::before { border-color: rgba(124,255,178,0.8); } }
.sn-dot.is-active::before { background: #0EE8ED; border-color: #0EE8ED; box-shadow: 0 0 10px rgba(14,232,237,0.7); transform: scale(1.25); }
.sn-dot[data-pos="0"].is-active::before { background: #ff5a5a; border-color: #ff5a5a; box-shadow: 0 0 10px rgba(255,90,90,0.6); }
.sunete-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; width: 100%; margin-top: 2px; }
.sunete-btn { position: relative; min-width: 0; width: 100%; padding: 10px 6px; font-size: 11.5px; letter-spacing: 0; overflow: hidden; display: inline-grid; justify-items: center; white-space: nowrap; }
.sn-cat-thunder { gap: 0; }
.sn-thunder-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.sn-fx { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.sn-fx .sn-cat-label { overflow: visible; max-width: none; text-overflow: clip; }
.sn-thunder-toggle { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,90,90,0.08); border: 1px solid rgba(255,90,90,0.55); color: #ff5a5a; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; }
.sn-boom { position: relative; display: block; width: 28px; height: 28px; margin: 0; pointer-events: none; filter: drop-shadow(0 0 2px currentColor); }
.sn-boom i { position: absolute; inset: 0; display: block; }
.sn-boom .b1 { clip-path: polygon(100.0% 48.2%,80.5% 58.4%,86.1% 74.1%,74.1% 74.3%,69.9% 90.0%,52.2% 80.1%,40.6% 99.1%,38.5% 74.0%,17.2% 86.5%,22.1% 67.8%,8.0% 61.2%,18.5% 48.9%,1.7% 37.3%,25.5% 32.4%,19.0% 11.9%,36.4% 17.6%,42.4% 2.0%,54.8% 15.0%,73.2% 5.7%,66.9% 28.4%,90.3% 27.7%,77.3% 42.5%); background: currentColor; background: radial-gradient(circle at 50% 50%, currentColor 35%, color-mix(in srgb, currentColor 55%, #000) 100%); }
.sn-boom .b2 { clip-path: polygon(85.7% 59.6%,68.5% 62.6%,69.5% 76.7%,52.7% 67.7%,45.0% 83.8%,40.8% 68.3%,24.0% 76.3%,33.7% 58.0%,17.0% 53.9%,26.9% 43.2%,23.9% 30.9%,35.8% 29.5%,39.6% 14.5%,52.4% 28.2%,65.5% 18.2%,66.0% 35.1%,82.8% 38.3%,66.5% 48.4%); background: currentColor; background: color-mix(in srgb, currentColor 55%, #fff); }
.sn-boom .b3 { clip-path: polygon(69.6% 63.9%,57.2% 63.9%,50.9% 73.7%,46.1% 62.2%,32.3% 64.4%,39.6% 52.6%,26.3% 46.5%,39.0% 42.3%,38.1% 32.2%,48.4% 34.6%,58.5% 30.6%,58.3% 43.0%,73.1% 43.3%,65.2% 51.2%); background: #fff; background: color-mix(in srgb, currentColor 10%, #fff); }
.sn-boom::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: currentColor; box-shadow: 2px 8px 0 currentColor, 12px 0 0 currentColor, 25px 3px 0 currentColor, 26px 19px 0 currentColor, 20px 25px 0 currentColor, 4px 24px 0 currentColor; }
.sn-wolf, .sn-flame, .sn-bird { position: relative; display: block; width: 28px; height: 28px; pointer-events: none; filter: drop-shadow(0 0 2px currentColor); }
.sn-wolf i, .sn-flame i, .sn-bird i { position: absolute; inset: 0; display: block; }
.sn-wolf .b1 { clip-path: polygon(12% 4%,34% 24%,50% 20%,66% 24%,88% 4%,90% 34%,98% 50%,88% 58%,94% 72%,78% 76%,66% 92%,50% 100%,34% 92%,22% 76%,6% 72%,12% 58%,2% 50%,10% 34%); background: currentColor; background: radial-gradient(circle at 50% 55%, currentColor 40%, color-mix(in srgb, currentColor 60%, #000) 100%); }
.sn-wolf .b2 { clip-path: polygon(50% 44%,62% 52%,66% 62%,58% 78%,50% 92%,42% 78%,34% 62%,38% 52%); background: currentColor; background: color-mix(in srgb, currentColor 45%, #fff); }
.sn-wolf .b3 { clip-path: polygon(44% 88%,50% 82%,56% 88%,50% 96%); background: #0f1216; }
.sn-wolf::before, .sn-wolf::after { content: ''; z-index: 2; position: absolute; top: 34%; width: 24%; height: 12%; background: #fff; background: color-mix(in srgb, currentColor 8%, #fff); }
.sn-wolf::before { left: 20%; clip-path: polygon(0% 0%, 100% 45%, 80% 100%, 10% 60%); }
.sn-wolf::after { right: 20%; clip-path: polygon(100% 0%, 0% 45%, 20% 100%, 90% 60%); }
.sn-bird .b1 { clip-path: polygon(98% 40%,86% 37%,82% 25%,72% 16%,59% 16%,51% 25%,49% 36%,37% 40%,21% 50%,3% 60%,5% 69%,24% 68%,35% 75%,42% 85%,50% 84%,52% 75%,60% 74%,70% 70%,80% 60%,86% 49%,91% 45%); background: currentColor; background: radial-gradient(circle at 50% 55%, currentColor 40%, color-mix(in srgb, currentColor 60%, #000) 100%); }
.sn-bird .b2 { clip-path: polygon(30% 50%,48% 44%,63% 50%,67% 60%,55% 70%,41% 67%); background: currentColor; background: color-mix(in srgb, currentColor 45%, #fff); }
.sn-bird .b3 { clip-path: polygon(66% 25%,72% 25%,72% 31%,66% 31%); background: #0f1216; }
.sn-flame .b1 { clip-path: polygon(52% 0%,60% 18%,72% 30%,70% 42%,80% 38%,88% 52%,90% 68%,82% 84%,68% 96%,50% 100%,32% 96%,18% 84%,10% 68%,12% 52%,22% 40%,30% 46%,34% 30%,44% 20%); background: currentColor; background: radial-gradient(circle at 50% 70%, currentColor 35%, color-mix(in srgb, currentColor 55%, #000) 100%); }
.sn-flame .b2 { clip-path: polygon(50% 30%,58% 44%,66% 52%,72% 66%,66% 82%,50% 92%,34% 82%,28% 66%,34% 52%,42% 58%,44% 42%); background: currentColor; background: color-mix(in srgb, currentColor 55%, #fff); }
.sn-flame .b3 { clip-path: polygon(50% 58%,58% 72%,56% 86%,50% 90%,44% 86%,42% 72%); background: #fff; background: color-mix(in srgb, currentColor 10%, #fff); }
@media (hover: hover) and (pointer: fine) { .sunete-app:not(.sn-nohover) .sn-thunder-toggle:hover { border-color: #ff5a5a; background: rgba(255,90,90,0.18); } }
.sn-thunder-toggle:active { transform: scale(0.94); }
.sn-thunder-toggle.is-on { background: rgba(14,232,237,0.16); border-color: #0EE8ED; color: #0EE8ED; box-shadow: 0 0 12px rgba(14,232,237,0.55); }
.sn-thunder-toggle.is-on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 14px rgba(14,232,237,0.65); animation: calendar-checkpoint-glow 1.8s ease-in-out infinite; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .sunete-app:not(.sn-nohover) .sn-thunder-toggle.is-on:hover { background: rgba(14,232,237,0.26); border-color: #0EE8ED; box-shadow: 0 0 16px rgba(14,232,237,0.75); } }
.sunete-app.is-playing .sn-cat-label.is-on { color: #7CFFB2; }
.sunete-app.is-playing .sn-grid-track-fill { background: linear-gradient(90deg,#ff8a8a,#7CFFB2); }
.sunete-app.is-playing .sn-dot.is-active:not([data-pos="0"])::before { background: #7CFFB2; border-color: #7CFFB2; box-shadow: 0 0 10px rgba(124,255,178,0.7); }
.sunete-app.is-playing .sn-thunder-toggle.is-on { background: rgba(124,255,178,0.16); border-color: #7CFFB2; color: #7CFFB2; box-shadow: 0 0 12px rgba(124,255,178,0.55); }
.sunete-app.is-playing .sn-thunder-toggle.is-on::after { box-shadow: 0 0 14px rgba(124,255,178,0.65); }
@media (hover: hover) and (pointer: fine) { .sunete-app.is-playing:not(.sn-nohover) .sn-thunder-toggle.is-on:hover { background: rgba(124,255,178,0.26); border-color: #7CFFB2; box-shadow: 0 0 16px rgba(124,255,178,0.75); } }
#sunete-start-btn.is-on { border-color: rgba(124,255,178,0.6) !important; background: rgba(124,255,178,0.16) !important; color: #7CFFB2 !important; }
#sunete-start-btn.is-on .crono-btn-default { opacity: 0; visibility: hidden; pointer-events: none; }
#sunete-start-btn.is-on .crono-btn-feedback { opacity: 1; visibility: visible; pointer-events: auto; color: #7CFFB2; }
#sunete-stop-btn { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ff8a8a; }
#sunete-stop-btn:focus-visible { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); outline: none; }
@media (hover: hover) and (pointer: fine) { #sunete-stop-btn:hover { background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.7); } }
#sunete-stop-btn:active { background: rgba(255,90,90,0.3); border-color: rgba(255,90,90,0.9); transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { #sunete-stop-btn:disabled:hover { background: rgba(255,90,90,0.08); border-color: rgba(255,90,90,0.4); } }
#sunete-stop-btn.is-flash { border-color: rgba(255,90,90,0.7) !important; background: rgba(255,90,90,0.22) !important; color: #ff8a8a !important; }
#sunete-stop-btn.is-flash .crono-btn-feedback { color: #ff8a8a; }
@media screen and (orientation: landscape) {
.sunete-app { width: 460px; padding: 20px 26px 22px; gap: 13px; border-radius: 14px; }
.sn-cat { gap: 7px; }
.sn-cat-label { font-size: 12.5px; }
.sunete-controls { gap: 8px; margin-top: 0; }
.sunete-btn { padding: 8px 6px; font-size: 11px; }
}
.photopdf-preview-scroll { width: 100%; min-width: 0; }
.photopdf-preview-page { background: #ffffff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 160px; width: 100%; box-sizing: border-box; }
.photopdf-preview-page img { display: block; width: 100%; height: auto; }
.photopdf-preview-placeholder { color: #8a8f98; font-size: 11.5px; font-weight: 700; text-align: center; padding: 46px 20px; }
.photopdf-export-btn:disabled { cursor: not-allowed; }
#win-photopdf .cv-app { flex-direction: column; flex-wrap: nowrap; }
#win-photopdf .cv-form, #win-photopdf .cv-preview-pane { flex: 0 0 auto; width: 100%; max-width: 100%; }
.qr-textarea-wrap { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; overflow: hidden; }
.qr-textarea-wrap:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(14,232,237,0.15); }
.qr-textarea { display: block; resize: none; box-sizing: border-box; overflow-y: hidden; min-height: 72px; max-height: 55vh; width: 100%; background: transparent; border: none; border-radius: 0; padding: 9px 11px; font-size: 13px; line-height: 1.5; }
.qr-textarea:focus { box-shadow: none; border-color: transparent; }
.qr-preview-scroll { width: 100%; min-width: 0; }
.qr-preview-page { background: #ffffff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 220px; width: 100%; box-sizing: border-box; padding: 16px; }
.qr-preview-page img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.qr-preview-placeholder { color: #8a8f98; font-size: 11.5px; font-weight: 700; text-align: center; padding: 46px 20px; }
.qr-preview-invalid { color: #ff8a8a; font-size: 11.5px; font-weight: 700; text-align: center; padding: 46px 20px; }
.qr-export-btn:disabled { cursor: not-allowed; }
#win-qr .cv-app { flex-direction: column; flex-wrap: nowrap; }
#win-qr .cv-form, #win-qr .cv-preview-pane { flex: 0 0 auto; width: 100%; max-width: 100%; }
@media (max-width: 640px) {
.photopdf-preview-placeholder { padding: 30px 16px; }
}