:root {
    --color-bg-app          : #f4f7fb;
    --color-bg-sidebar      : #ffffff;
    --color-bg-surface      : #ffffff;
    --color-bg-input        : #f8fbff;
    --color-bg-accent-soft  : #eef8ff;
    --color-text-primary    : #1f2937;
    --color-text-muted      : #64748b;
    --color-border-default  : #dbe5ef;
    --color-border-strong   : #d6e2ee;
    --color-accent          : #0ea5e9;
    --color-accent-strong   : #0284c7;
}

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

body {
    line-height             : 1.6;
    min-height              : 100vh;
    position                : relative;
    overflow-x              : hidden;
    font-family             : 'Noto Sans JP', 'Manrope', sans-serif;
    color                   : var(--color-text-primary);
    background              : radial-gradient(circle at 10% 10%, #eef4ff 0%, #f8fafc 45%, var(--color-bg-app) 100%);
}

.container {
    height                  : 100vh;
    max-width               : 100%;
    min-width: 750px;
    min-height: 700px;
    display                 : flex;
    animation               : fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity          : 0; }
    to   { opacity          : 1; }
}


/* サイドバー */
.sidebar {
    gap                     : 18px;
    width                   : 360px;
    padding                 : 26px 24px;
    display                 : flex;
    overflow-y              : auto;
    flex-direction          : column;
    box-shadow              : 8px 0 30px rgba(15, 23, 42, 0.08);
    border-right            : 1px solid var(--color-border-default);
    background              : linear-gradient(165deg, var(--color-bg-sidebar) 0%, #f8fbff 100%);
}

.sidebar-header {
    padding-bottom          : 12px;
    text-align              : center;
    border-bottom           : 1px solid var(--color-border-default);
}

.sidebar-header h1 {
    font-size               : 1.25rem;
    font-weight             : 800;
    letter-spacing          : 0.4px;
    margin-bottom           : 3px;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    color                   : var(--color-text-primary);
}

.sidebar-header p {
    font-size               : 0.78rem;
    font-weight             : 600;
    letter-spacing          : 0.4px;
    color                   : var(--color-text-muted);
}


/* Wi-Fi情報 */
.form-section {
    padding                 : 16px;
    border-radius           : 14px;
    border                  : 1px solid #e2e8f0;
    box-shadow              : 0 10px 24px rgba(15, 23, 42, 0.06);
    background              : var(--color-bg-surface);
}

.form-section h2 {
    gap                     : 10px;
    font-size               : 0.95rem;
    font-weight             : 700;
    letter-spacing          : 0.3px;
    margin-bottom           : 12px;
    padding-bottom          : 10px;
    display                 : flex;
    align-items             : center;
    justify-content         : space-between;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    border-bottom           : 1px solid #e5edf6;
    color                   : var(--color-text-primary);
}

.form-section h2 span {
    margin-right            : auto;
}

.form-toggle {
    display                 : none;
    align-items             : center;
    justify-content         : center;
    width                   : 30px;
    height                  : 30px;
    min-width               : 30px;
    padding                 : 0;
    margin-left             : 8px;
    border                  : 1px solid #c8d9ea;
    border-radius           : 999px;
    font-size               : 0;
    color                   : transparent;
    background              : rgba(255, 255, 255, 0.92);
    box-shadow              : none;
    flex                    : 0 0 30px;
    flex-shrink             : 0;
}

.form-toggle::after {
    content                 : '▴';
    font-size               : 0.8rem;
    line-height             : 1;
    color                   : #0ea5e9;
    transition              : color 0.2s ease;
}

.form-toggle[aria-expanded='false']::after {
    content                 : '▾';
}

.form-toggle:hover {
    transform               : none;
    box-shadow              : none;
    border-color            : #9cc7ec;
    background              : #f8fbff;
}

.icon {
    width                   : 20px;
    height                  : 20px;
    color                   : var(--color-accent);
}

.form-group {
    margin-bottom           : 12px;
}

label {
    font-size               : 0.82rem;
    font-weight             : 700;
    letter-spacing          : 0.8px;
    margin-bottom           : 8px;
    display                 : block;
    text-transform          : uppercase;
    color                   : var(--color-text-muted);
}

input,
select {
    width                   : 100%;
    padding                 : 9px 12px;
    border-radius           : 10px;
    font-size               : 0.9rem;
    font-weight             : 500;
    font-family             : 'Noto Sans JP', 'Manrope', sans-serif;
    border                  : 1px solid var(--color-border-strong);
    color                   : var(--color-text-primary);
    background              : var(--color-bg-input);
    transition              : all 0.3s ease;
}

input:focus,
select:focus {
    outline                 : none;
    border-color            : var(--color-accent);
    box-shadow              : 0 0 0 3px rgba(14, 165, 233, 0.14);
    background              : var(--color-bg-surface);
}

input::placeholder {
    opacity                 : 0.6;
    color                   : var(--color-text-muted);
}

.form-group.is-disabled label {
    color                   : #94a3b8;
}

.form-group.is-disabled input {
    cursor                  : not-allowed;
    color                   : #94a3b8;
    border-color            : #dbe5ef;
    background              : #f1f5f9;
}

.form-group.is-disabled input::placeholder {
    opacity                 : 0.9;
    color                   : #94a3b8;
}


.button-group {
    gap                     : 10px;
    margin-top              : 12px;
    display                 : flex;
}

button {
    flex                    : 1;
    padding                 : 10px 14px;
    font-size               : 0.82rem;
    font-weight             : 700;
    letter-spacing          : 0.9px;
    border-radius           : 12px;
    border                  : none;
    cursor                  : pointer;
    text-transform          : uppercase;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    box-shadow              : 0 4px 10px rgba(2, 132, 199, 0.20);
    color                   : var(--color-bg-surface);
    background              : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    transition              : all 0.3s ease;
}

button:hover {
    transform               : translateY(-3px);
    box-shadow              : 0 7px 14px rgba(2, 132, 199, 0.24);
}

button:active {
    transform               : translateY(-1px);
}

button.secondary {
    box-shadow              : none;
    border                  : 1px solid #bed4e8;
    color                   : #2563eb;
    background              : var(--color-bg-surface);
}

button.secondary:hover {
    color                   : #1d4ed8;
    background              : #eff6ff;
}


/* 保存済みWi-Fi */
.saved-wifi h2 {
    font-size               : 0.92rem;
    font-weight             : 700;
    letter-spacing          : 0.3px;
    margin-bottom           : 16px;
    padding-bottom          : 8px;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    border-bottom           : 1px solid var(--color-border-default);
    color                   : var(--color-text-primary);
}

.wifi-list {
    gap                     : 12px;
    display                 : flex;
    flex-direction          : column;
}

.wifi-item {
    padding                 : 10px 12px;
    border-radius           : 12px;
    cursor                  : pointer;
    display                 : grid;
    grid-template-columns   : minmax(0, 1fr) auto;
    column-gap              : 8px;
    min-height              : 56px;
    align-items             : center;
    align-content           : center;
    border                  : 1px solid var(--color-border-default);
    background              : var(--color-bg-surface);
    transition              : all 0.3s ease;
}

.wifi-info {
    min-width               : 0;
    flex                    : 1;
    display                 : flex;
    justify-content         : center;
    flex-direction          : column;
    align-self              : center;
}

.wifi-item:hover {
    border-color            : var(--color-accent);
    box-shadow              : 0 8px 16px rgba(15, 23, 42, 0.08);
    background              : #f6fbff;
    transform               : translateX(4px);
}

.wifi-info h3 {
    font-size               : 0.9rem;
    font-weight             : 700;
    margin                  : 0;
    margin-bottom           : 2px;
    overflow                : hidden;
    white-space             : nowrap;
    text-overflow           : ellipsis;
    color                   : var(--color-text-primary);
}

.wifi-info p {
    font-size               : 0.76rem;
    font-weight             : 500;
    margin                  : 0;
    overflow                : hidden;
    white-space             : nowrap;
    text-overflow           : ellipsis;
    color                   : var(--color-text-muted);
}

.wifi-info-group {
    gap                     : 8px;
    display                 : flex;
    align-items             : center;
    align-self              : center;
    flex-shrink             : 0;
}

.wifi-info-button {
    padding                 : 6px 10px;
    min-width               : 44px;
    font-size               : 0.76rem;
    font-weight             : 600;
    border-radius           : 8px;
    cursor                  : pointer;
    background              : transparent;
    border                  : 1px solid #d2e1ef;
    color                   : var(--color-text-muted);
    transition              : all 0.3s ease;
}

.wifi-info-button:hover {
    border-color            : var(--color-accent);
    color                   : #0369a1;
    background              : var(--color-bg-accent-soft);
}

.wifi-info-button.delete:hover {
    border-color            : #c17a4a;
    color                   : #8b4423;
    background              : #fde5d4;
}


/* メイン画面 */
.main-display {
    flex                    : 1;
    padding                 : 28px;
    display                 : flex;
    position                : relative;
    overflow                : hidden;
    align-items             : center;
    justify-content         : center;
    background              : linear-gradient(140deg, #f6faff 0%, #f1f6fb 55%, #eef4ff 100%);
}

.main-display::before {
    top                     : 0;
    left                    : 0;
    width                   : clamp(150px, 24vw, 250px);
    height                  : clamp(150px, 24vw, 250px);
    border-radius           : 50%;
    content                 : '';
    position                : absolute;
    transform               : translate(-34%, -34%);
    pointer-events          : none;
    background              : radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 72%);
}

.main-display::after {
    right                   : 0;
    bottom                  : 0;
    width                   : clamp(150px, 24vw, 250px);
    height                  : clamp(150px, 24vw, 250px);
    border-radius           : 50%;
    content                 : '';
    position                : absolute;
    transform               : translate(34%, 34%);
    pointer-events          : none;
    background              : radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 72%);
}

.app-stain {
    opacity                 : 0.58;
    border-radius           : 50%;
    position                : absolute;
}

.app-stain-1 {
    top                     : clamp(-90px, -8vw, -56px);
    right                   : clamp(-90px, -8vw, -56px);
    width                   : clamp(170px, 30vw, 300px);
    height                  : clamp(170px, 30vw, 300px);
    background              : radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
}

.app-stain-2 {
    left                    : clamp(-90px, -8vw, -56px);
    bottom                  : clamp(-90px, -8vw, -56px);
    width                   : clamp(170px, 30vw, 300px);
    height                  : clamp(170px, 30vw, 300px);
    background              : radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
}

.decoration-top,
.decoration-bottom {
    left                    : 50%;
    opacity                 : 0.8;
    font-size               : 0.8rem;
    font-weight             : 700;
    letter-spacing          : 4px;
    position                : absolute;
    color                   : #64748b;
    z-index                 : 4;
    pointer-events          : none;
    transform               : translateX(-50%);
}

.decoration-top {
    top                     : 30px;
}

.decoration-bottom {
    bottom                  : 30px;
}


#qrcode-container {
    width                   : 100%;
    height                  : 100%;
    z-index                 : 1;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    flex-direction          : column;
}

.empty-state {
    text-align              : center;
    color                   : var(--color-text-muted);
}

.empty-state svg {
    width                   : 100px;
    height                  : 100px;
    opacity                 : 0.15;
    margin-bottom           : 14px;
    color                   : var(--color-accent);
}

.empty-state p {
    font-size               : 1rem;
    font-weight             : 500;
    line-height             : 1.8;
}


#qr-display {
    width                   : 100%;
    display                 : flex;
    text-align              : center;
    align-items             : center;
    justify-content         : center;
    flex-direction          : column;
}

.qr-content {
    text-align              : center;
    animation               : fadeInDown 1s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity             : 0;
        transform           : translateY(-40px);
    }
    to {
        opacity             : 1;
        transform           : translateY(0);
    }
}

.qr-title {
    font-size               : 1.75rem;
    font-weight             : 800;
    line-height             : 1.15;
    letter-spacing          : 0.8px;
    margin-bottom           : 0;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    text-shadow             : 0 4px 14px rgba(15, 23, 42, 0.08);
    color                   : var(--color-text-primary);
}

.wifi-name-display {
    font-size               : 1.2rem;
    font-weight             : 700;
    margin-top              : 15px;
    margin-bottom           : 0;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    color                   : var(--color-accent);
}

#qrcode {
    z-index                 : 1;
    margin                  : 22px auto;
    padding                 : 20px;
    border-radius           : 18px;
    border                  : 1px solid #d8e4f0;
    box-shadow              : 0 20px 50px rgba(15, 23, 42, 0.16);
    background              : var(--color-bg-surface);
    transition              : transform 0.5s ease;
    animation               : fadeInUp 1.2s ease-out;
}

.qr-frame {
    width                   : fit-content;
    display                 : inline-flex;
    flex-direction          : column;
    align-items             : stretch;
}

@keyframes fadeInUp {
    from {
        opacity             : 0;
        transform           : translateY(40px);
    }
    to {
        opacity             : 1;
        transform           : translateY(0);
    }
}

#qrcode:hover {
    transform               : scale(1.05) rotate(1deg);
}

#qrcode canvas,
#qrcode img {
    border-radius           : 12px;
}

.qr-actions {
    width                   : 100%;
    margin-top              : 16px;
}

.qr-actions .button-group {
    margin-top              : 0;
}


/* 通知設定 */
.notification {
    z-index                 : 1000;
    top                     : 30px;
    right                   : 30px;
    padding                 : 18px 28px;
    font-weight             : 600;
    border-radius           : 15px;
    position                : fixed;
    border                  : 1px solid rgba(255, 255, 255, 0.35);
    box-shadow              : 0 8px 30px rgba(2, 132, 199, 0.34);
    color                   : var(--color-bg-surface);
    background              : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    animation               : slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity             : 0;
        transform           : translateX(400px);
    }
    to {
        opacity             : 1;
        transform           : translateX(0);
    }
}


/* レスポンシブ対応 */
@media (max-width: 960px) {
    .container {
        min-width           : 0;
        min-height          : 100vh;
        height              : auto;
        flex-direction      : column;
    }

    .sidebar {
        width               : 100%;
        max-height          : none;
        border-right        : none;
        border-bottom       : 1px solid var(--color-border-default);
        box-shadow          : 0 8px 24px rgba(15, 23, 42, 0.08);
    }

    .main-display {
        min-height          : 58vh;
        padding             : 24px 16px;
    }

    .main-display::before {
        width               : 160px;
        height              : 160px;
        transform           : translate(-42%, -42%);
    }

    .main-display::after {
        width               : 160px;
        height              : 160px;
        transform           : translate(42%, 42%);
    }

    .app-stain {
        opacity             : 0.46;
    }

    .app-stain-1 {
        top                 : -58px;
        right               : -58px;
        width               : 180px;
        height              : 180px;
    }

    .app-stain-2 {
        left                : -58px;
        bottom              : -58px;
        width               : 180px;
        height              : 180px;
    }

    .decoration-top,
    .decoration-bottom {
        display             : none;
    }

    .form-toggle {
        display             : inline-flex;
    }

    .form-section.is-collapsed #wifi-form {
        display             : none;
    }

    .form-section.is-collapsed {
        padding             : 10px 12px;
    }

    .form-section.is-collapsed h2 {
        margin-bottom       : 0;
        padding-bottom      : 0;
        border-bottom       : none;
    }

    .saved-wifi {
        min-height          : 0;
    }

    .saved-wifi .wifi-list {
        max-height          : 124px;
        padding-right       : 4px;
        overflow-y          : auto;
    }
}

@media (max-width: 560px) {
    body {
        font-size           : 15px;
    }

    .sidebar {
        padding             : 18px 14px;
        gap                 : 14px;
    }

    .main-display::before {
        width               : 124px;
        height              : 124px;
        transform           : translate(-46%, -46%);
    }

    .main-display::after {
        width               : 132px;
        height              : 132px;
        transform           : translate(46%, 46%);
    }

    .app-stain-1 {
        top                 : -42px;
        right               : -42px;
        width               : 132px;
        height              : 132px;
    }

    .app-stain-2 {
        display             : none;
    }

    .form-section h2 {
        gap                 : 8px;
    }

    .sidebar-header h1 {
        font-size           : 1.08rem;
    }

    .form-section,
    .saved-wifi {
        width               : 100%;
    }

    .wifi-item {
        column-gap          : 6px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .wifi-info {
        width               : auto;
    }

    .wifi-info-group {
        gap                 : 6px;
        width               : auto;
        flex-wrap           : nowrap;
        justify-content     : flex-end;
    }

    .saved-wifi .wifi-list {
        max-height          : 124px;
    }

    .qr-title {
        font-size           : 1.3rem;
        line-height         : 1.2;
    }

    .wifi-name-display {
        margin-top          : 10px;
        font-size           : 1rem;
    }

    #qrcode {
        padding             : 14px;
        margin              : 16px auto;
    }

    .qr-frame {
        max-width           : 92vw;
    }

    #qrcode canvas,
    #qrcode img {
        width               : min(68vw, 220px) !important;
        height              : min(68vw, 220px) !important;
    }

    .button-group {
        flex-direction      : column;
    }

    .button-group button {
        width               : 100%;
    }

    .notification {
        left                : 12px;
        right               : 12px;
        top                 : 12px;
        padding             : 12px 14px;
        text-align          : center;
    }
}


/* 印刷設定 */
.print-section {
    display                 : none;
}

.print-content {
    padding                 : 60px 40px;
    text-align              : center;
}

.print-qr-title {
    font-size               : 3rem;
    margin-bottom           : 0;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    color                   : var(--color-text-primary);
}

.print-wifi-name-display {
    font-size               : 2rem;
    font-weight             : 700;
    margin-top              : 15px;
    margin-bottom           : 35px;
    font-family             : 'Manrope', 'Noto Sans JP', sans-serif;
    color                   : var(--color-accent);
}

.print-message {
    font-size               : 1.2rem;
    margin-top              : 50px;
    color                   : var(--color-text-muted);
}

#print-qrcode {
    margin                  : 0 auto 24px;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
}

#print-qrcode img {
    width                   : 280px;
    height                  : 280px;
    padding                 : 8px;
    border-radius           : 12px;
    border                  : 1px solid #d1d5db;
    background              : #ffffff;
}

@media print {
    body {
        color               : var(--color-text-primary);
        background          : #ffffff;
    }

    body::before,
    body::after,
    .app-stain {
        display             : none;
    }

    .container {
        height              : auto;
        display             : block;
    }

    .sidebar,
    .qr-actions,
    .empty-state,
    .decoration-top,
    .decoration-bottom,
    .notification,
    .main-display {
        display             : none !important;
    }

    .print-section {
        height              : 100vh;
        display             : flex !important;
        align-items         : center;
        justify-content     : center;
        padding             : 0;
    }

    .print-content {
        padding             : 60px 40px;
    }
}